@cube-dev/ui-kit 0.94.2 → 0.96.0

package/types/components/content/Layout/LayoutContext.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+export type Side = 'left' | 'top' | 'right' | 'bottom';
+export interface LayoutContextValue {
+    registerPanel: (side: Side, size: number) => void;
+    unregisterPanel: (side: Side) => void;
+    updatePanelSize: (side: Side, size: number) => void;
+    setDragging: (isDragging: boolean) => void;
+    markReady: () => void;
+    panelSizes: Record<Side, number>;
+    isDragging: boolean;
+    isReady: boolean;
+    /** Whether transitions are enabled for panels */
+    hasTransition: boolean;
+}
+export declare const LayoutContext: import("react").Context<LayoutContextValue | null>;
+export declare function useLayoutContext(): LayoutContextValue | null;
+export interface LayoutProviderProps {
+    children: ReactNode;
+    /** Whether transitions are enabled for panels */
+    hasTransition?: boolean;
+}
+export declare function LayoutProvider({ children, hasTransition, }: LayoutProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Provider that resets the layout context for sub-components.
+ * Used to prevent panels in nested Layouts from affecting parent layouts.
+ */
+export declare function LayoutContextReset({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export interface LayoutPanelContextValue {
+    /** Callback to change the panel's open state */
+    onOpenChange: (isOpen: boolean) => void;
+    /** Current open state of the panel */
+    isOpen: boolean;
+}
+export declare const LayoutPanelContext: import("react").Context<LayoutPanelContextValue | null>;
+export declare function useLayoutPanelContext(): LayoutPanelContextValue | null;

package/types/components/content/Layout/LayoutFlex.d.ts

@@ -0,0 +1,5 @@
+import { CubeLayoutContentProps } from './LayoutContent';
+export interface CubeLayoutFlexProps extends CubeLayoutContentProps {
+}
+declare const _LayoutFlex: import("react").ForwardRefExoticComponent<CubeLayoutFlexProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutFlex as LayoutFlex };

package/types/components/content/Layout/LayoutFooter.d.ts

@@ -0,0 +1,7 @@
+import { CubeLayoutContentProps } from './LayoutContent';
+export interface CubeLayoutFooterProps extends CubeLayoutContentProps {
+    /** Inverts the order of children (primary action on right) */
+    invertOrder?: boolean;
+}
+declare const _LayoutFooter: import("react").ForwardRefExoticComponent<CubeLayoutFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutFooter as LayoutFooter };

package/types/components/content/Layout/LayoutGrid.d.ts

@@ -0,0 +1,12 @@
+import { Styles } from '../../../tasty';
+import { CubeLayoutContentProps } from './LayoutContent';
+export interface CubeLayoutGridProps extends CubeLayoutContentProps {
+    /** Grid template columns */
+    columns?: Styles['gridColumns'];
+    /** Grid template rows */
+    rows?: Styles['gridRows'];
+    /** Grid template shorthand */
+    template?: Styles['gridTemplate'];
+}
+declare const _LayoutGrid: import("react").ForwardRefExoticComponent<CubeLayoutGridProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutGrid as LayoutGrid };

package/types/components/content/Layout/LayoutHeader.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { CubeLayoutContentProps } from './LayoutContent';
+export interface CubeLayoutHeaderProps extends CubeLayoutContentProps {
+    /** Page/section title */
+    title?: ReactNode;
+    /** Title heading level (1-6) */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Content next to the title */
+    suffix?: ReactNode;
+    /** Content on the right side */
+    extra?: ReactNode;
+    /** Text below the title */
+    subtitle?: ReactNode;
+    /**
+     * Navigation breadcrumbs (max 3 items recommended).
+     * Uses Link component which integrates with the navigation provider.
+     */
+    breadcrumbs?: Array<[label: string, href: string]>;
+}
+declare const _LayoutHeader: import("react").ForwardRefExoticComponent<CubeLayoutHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutHeader as LayoutHeader };

package/types/components/content/Layout/LayoutPane.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
+import { ScrollbarType } from './LayoutContent';
+export type ResizeEdge = 'right' | 'bottom';
+export interface CubeLayoutPaneProps extends BaseProps, ContainerStyleProps {
+    /** Edge where resize handler appears */
+    resizeEdge?: ResizeEdge;
+    /** Enable resize functionality */
+    isResizable?: boolean;
+    /** Controlled size (width for right edge, height for bottom edge) */
+    size?: number | string;
+    /** Default size for uncontrolled state */
+    defaultSize?: number | string;
+    /** Minimum size constraint */
+    minSize?: number | string;
+    /** Maximum size constraint */
+    maxSize?: number | string;
+    /** Size change callback */
+    onSizeChange?: (size: number) => void;
+    /** Scrollbar style */
+    scrollbar?: ScrollbarType;
+    /** Custom styles */
+    styles?: Styles;
+    children?: ReactNode;
+}
+declare const _LayoutPane: import("react").ForwardRefExoticComponent<CubeLayoutPaneProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutPane as LayoutPane };

package/types/components/content/Layout/LayoutPanel.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
+import { CubeDialogContainerProps } from '../../overlays/Dialog/DialogContainer';
+import { Side } from './LayoutContext';
+export interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {
+    /** Side of the layout where panel is positioned */
+    side: Side;
+    /** Panel size (width for left/right, height for top/bottom) - controlled */
+    size?: number | string;
+    /** Default panel size for uncontrolled state */
+    defaultSize?: number | string;
+    /** Minimum panel size */
+    minSize?: number | string;
+    /** Maximum panel size */
+    maxSize?: number | string;
+    /** Enable resize functionality */
+    isResizable?: boolean;
+    /** Size change callback */
+    onSizeChange?: (size: number) => void;
+    /** Controlled open state */
+    isOpen?: boolean;
+    /** Default open state */
+    defaultIsOpen?: boolean;
+    /** Open state change callback */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Enable slide transition on open/close */
+    hasTransition?: boolean;
+    /** Switch to dialog mode (renders panel inside Dialog) */
+    isDialog?: boolean;
+    /** Controlled dialog open state */
+    isDialogOpen?: boolean;
+    /** Default dialog open state */
+    defaultIsDialogOpen?: boolean;
+    /** Dialog open state change callback */
+    onDialogOpenChange?: (isOpen: boolean) => void;
+    /** Props passed to Dialog component when in dialog mode */
+    dialogProps?: Omit<CubeDialogContainerProps, 'isDismissable' | 'onDismiss' | 'isOpen'>;
+    /** Padding for content areas inside the panel. Default: '1x' */
+    contentPadding?: Styles['padding'];
+    /** localStorage key for persisting panel size. When provided, size is stored and restored across instances. */
+    sizeStorageKey?: string;
+    /** Styles for the panel */
+    styles?: Styles;
+    children?: ReactNode;
+}
+declare const _LayoutPanel: import("react").ForwardRefExoticComponent<CubeLayoutPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutPanel as LayoutPanel };

package/types/components/content/Layout/LayoutPanelHeader.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { BaseProps, ContainerStyleProps } from '../../../tasty';
+export interface CubeLayoutPanelHeaderProps extends BaseProps, ContainerStyleProps {
+    /** Panel title */
+    title?: ReactNode;
+    /** Title heading level (affects semantics, not visual) */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Show close button */
+    isClosable?: boolean;
+    /** Close button click handler */
+    onClose?: () => void;
+    /** Custom actions to display (overrides default close button) */
+    actions?: ReactNode;
+    children?: ReactNode;
+}
+declare const _LayoutPanelHeader: import("react").ForwardRefExoticComponent<CubeLayoutPanelHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutPanelHeader as LayoutPanelHeader };

package/types/components/content/Layout/LayoutToolbar.d.ts

@@ -0,0 +1,5 @@
+import { CubeLayoutContentProps } from './LayoutContent';
+export interface CubeLayoutToolbarProps extends CubeLayoutContentProps {
+}
+declare const _LayoutToolbar: import("react").ForwardRefExoticComponent<CubeLayoutToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutToolbar as LayoutToolbar };

package/types/components/content/Layout/hooks/useTinyScrollbar.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, RefObject } from 'react';
+export interface TinyScrollbarState {
+    hasOverflowY: boolean;
+    hasOverflowX: boolean;
+    scrollTop: number;
+    scrollLeft: number;
+    scrollHeight: number;
+    scrollWidth: number;
+    clientHeight: number;
+    clientWidth: number;
+}
+export interface TinyScrollbarResult {
+    handleVStyle: CSSProperties;
+    handleHStyle: CSSProperties;
+    hasOverflowY: boolean;
+    hasOverflowX: boolean;
+    isScrolling: boolean;
+}
+export declare function useTinyScrollbar(ref: RefObject<HTMLElement | null>, enabled: boolean): TinyScrollbarResult;

package/types/components/content/Layout/index.d.ts

@@ -0,0 +1,41 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { CubeLayoutProps } from './Layout';
+import { LayoutBlock } from './LayoutBlock';
+import { LayoutContent } from './LayoutContent';
+import { LayoutFlex } from './LayoutFlex';
+import { LayoutFooter } from './LayoutFooter';
+import { LayoutGrid } from './LayoutGrid';
+import { LayoutHeader } from './LayoutHeader';
+import { LayoutPane } from './LayoutPane';
+import { LayoutPanel } from './LayoutPanel';
+import { LayoutPanelHeader } from './LayoutPanelHeader';
+import { LayoutToolbar } from './LayoutToolbar';
+export { GridLayout } from './GridLayout';
+export type { CubeGridLayoutProps } from './GridLayout';
+export type { CubeLayoutProps } from './Layout';
+export type { CubeLayoutBlockProps } from './LayoutBlock';
+export type { CubeLayoutContentProps, ScrollbarType } from './LayoutContent';
+export type { CubeLayoutFlexProps } from './LayoutFlex';
+export type { CubeLayoutGridProps } from './LayoutGrid';
+export type { CubeLayoutFooterProps } from './LayoutFooter';
+export type { CubeLayoutHeaderProps } from './LayoutHeader';
+export type { CubeLayoutPaneProps, ResizeEdge } from './LayoutPane';
+export type { CubeLayoutPanelProps } from './LayoutPanel';
+export type { CubeLayoutPanelHeaderProps } from './LayoutPanelHeader';
+export type { CubeLayoutToolbarProps } from './LayoutToolbar';
+export { LayoutContext, LayoutPanelContext, useLayoutContext, useLayoutPanelContext, } from './LayoutContext';
+export type { LayoutContextValue, LayoutPanelContextValue, Side, } from './LayoutContext';
+interface LayoutComponent extends ForwardRefExoticComponent<CubeLayoutProps & RefAttributes<HTMLDivElement>> {
+    Toolbar: typeof LayoutToolbar;
+    Header: typeof LayoutHeader;
+    Footer: typeof LayoutFooter;
+    Content: typeof LayoutContent;
+    Block: typeof LayoutBlock;
+    Flex: typeof LayoutFlex;
+    Grid: typeof LayoutGrid;
+    Pane: typeof LayoutPane;
+    Panel: typeof LayoutPanel;
+    PanelHeader: typeof LayoutPanelHeader;
+}
+declare const Layout: LayoutComponent;
+export { Layout };

package/types/components/content/Layout/utils.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Clamps a size value within min/max constraints.
+ * Handles both number and string constraint values (only numbers are applied).
+ */
+export declare function clampSize(value: number, minSize?: number | string, maxSize?: number | string): number;

package/types/components/content/List/SectionHeading.d.ts

@@ -68,9 +68,7 @@ export declare const SectionHeading: import("react").ComponentType<{
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../../tasty").Styles | undefined;
-    mods?: {
-        [key: string]: string | number | boolean | null | undefined;
-    } | undefined;
+    mods?: import("../../../tasty").Mods | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;