@cube-dev/ui-kit 0.95.0 → 0.97.0

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { BaseProps, BlockStyleProps, ColorStyleProps, FlowStyleProps, OuterStyleProps, Styles } from '../../../tasty';
+export interface CubeLayoutProps extends BaseProps, OuterStyleProps, BlockStyleProps, ColorStyleProps, FlowStyleProps {
+    /** Switch to grid display mode */
+    isGrid?: boolean;
+    /** Grid template columns (when isGrid=true) */
+    columns?: Styles['gridColumns'];
+    /** Grid template rows (when isGrid=true) */
+    rows?: Styles['gridRows'];
+    /** Grid template shorthand */
+    template?: Styles['gridTemplate'];
+    /** Padding for content areas (Layout.Content components). Default: '1x' */
+    contentPadding?: Styles['padding'];
+    /** Enable transition animation for Inner content when panels open/close */
+    hasTransition?: boolean;
+    /** Styles for wrapper and Inner sub-element */
+    styles?: Styles;
+    children?: ReactNode;
+    /**
+     * @internal Force show dev warning even in production (for storybook testing)
+     */
+    _forceShowDevWarning?: boolean;
+}
+declare const _Layout: import("react").ForwardRefExoticComponent<CubeLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _Layout as Layout };

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

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

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

@@ -0,0 +1,5 @@
+import { CubeLayoutContainerProps } from './LayoutContainer';
+export interface CubeLayoutCenterProps extends CubeLayoutContainerProps {
+}
+declare const _LayoutCenter: import("react").ForwardRefExoticComponent<CubeLayoutCenterProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutCenter as LayoutCenter };

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
+export interface CubeLayoutContainerProps extends BaseProps, ContainerStyleProps {
+    children?: ReactNode;
+    /** Custom styles for container and inner elements */
+    styles?: Styles;
+    /** Custom styles for the inner element */
+    innerStyles?: Styles;
+}
+declare const _LayoutContainer: import("react").ForwardRefExoticComponent<CubeLayoutContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutContainer as LayoutContainer };

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { BaseProps, ContainerStyleProps, Mods } from '../../../tasty';
+export type ScrollbarType = 'default' | 'thin' | 'tiny' | 'none';
+export interface CubeLayoutContentProps extends BaseProps, ContainerStyleProps {
+    /** Scrollbar style: 'default' | 'thin' | 'tiny' | 'none' */
+    scrollbar?: ScrollbarType;
+    children?: ReactNode;
+    /** Additional modifiers to apply */
+    mods?: Mods;
+}
+declare const _LayoutContent: import("react").ForwardRefExoticComponent<CubeLayoutContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutContent as LayoutContent };

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

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+export type Side = 'left' | 'top' | 'right' | 'bottom';
+/** Callback to dismiss an overlay panel */
+export type OverlayDismissCallback = () => void;
+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;
+    /** Register an overlay panel's dismiss callback. Returns unregister function. */
+    registerOverlayPanel: (dismiss: OverlayDismissCallback) => () => void;
+    /** Dismiss all overlay panels */
+    dismissOverlayPanels: () => void;
+    /** Whether there are any overlay panels currently open */
+    hasOverlayPanels: 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,66 @@
+import { ReactNode } from 'react';
+import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
+import { CubeDialogContainerProps } from '../../overlays/Dialog/DialogContainer';
+import { Side } from './LayoutContext';
+/** Panel rendering mode */
+export type LayoutPanelMode = 'default' | 'sticky' | 'overlay' | 'dialog';
+export interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {
+    /** Side of the layout where panel is positioned */
+    side: Side;
+    /**
+     * Panel rendering mode:
+     * - `default`: Standard panel that pushes content aside
+     * - `sticky`: Panel floats over content without pushing it
+     * - `overlay`: Panel with dismissable backdrop overlay
+     * - `dialog`: Panel renders as a modal dialog
+     */
+    mode?: LayoutPanelMode;
+    /** 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;
+    /**
+     * Whether the panel can be dismissed by clicking the overlay (overlay mode) or pressing Escape.
+     * Only applies to `overlay` and `dialog` modes. Default: true
+     */
+    isDismissable?: boolean;
+    /** Styles for the overlay backdrop in overlay mode */
+    overlayStyles?: Styles;
+    /**
+     * @deprecated Use `mode="dialog"` instead. Switch to dialog mode (renders panel inside Dialog)
+     */
+    isDialog?: boolean;
+    /** Controlled dialog open state (used with mode="dialog") */
+    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,47 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { CubeLayoutProps } from './Layout';
+import { LayoutBlock } from './LayoutBlock';
+import { LayoutCenter } from './LayoutCenter';
+import { LayoutContainer } from './LayoutContainer';
+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 { CubeLayoutCenterProps } from './LayoutCenter';
+export type { CubeLayoutContainerProps } from './LayoutContainer';
+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, LayoutPanelMode } 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;
+    Container: typeof LayoutContainer;
+    Center: typeof LayoutCenter;
+    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;

package/types/components/content/Text.d.ts

@@ -35,7 +35,6 @@ declare const MinorText: import("react").ComponentType<{
     display?: ResponsiveStyleValue<import("csstype").Property.Display | undefined>;
     fontStyle?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
     fontWeight?: ResponsiveStyleValue<import("csstype").Property.FontWeight | undefined>;
-    opacity?: ResponsiveStyleValue<import("csstype").Property.Opacity | undefined>;
     textTransform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     transform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     whiteSpace?: ResponsiveStyleValue<import("csstype").Property.WhiteSpace | undefined>;
@@ -59,9 +58,7 @@ declare const MinorText: 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;
@@ -445,7 +442,6 @@ declare const DangerText: import("react").ComponentType<{
     display?: ResponsiveStyleValue<import("csstype").Property.Display | undefined>;
     fontStyle?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
     fontWeight?: ResponsiveStyleValue<import("csstype").Property.FontWeight | undefined>;
-    opacity?: ResponsiveStyleValue<import("csstype").Property.Opacity | undefined>;
     textTransform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     transform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     whiteSpace?: ResponsiveStyleValue<import("csstype").Property.WhiteSpace | undefined>;
@@ -469,9 +465,7 @@ declare const DangerText: 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;
@@ -855,7 +849,6 @@ declare const SuccessText: import("react").ComponentType<{
     display?: ResponsiveStyleValue<import("csstype").Property.Display | undefined>;
     fontStyle?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
     fontWeight?: ResponsiveStyleValue<import("csstype").Property.FontWeight | undefined>;
-    opacity?: ResponsiveStyleValue<import("csstype").Property.Opacity | undefined>;
     textTransform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     transform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     whiteSpace?: ResponsiveStyleValue<import("csstype").Property.WhiteSpace | undefined>;
@@ -879,9 +872,7 @@ declare const SuccessText: 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;
@@ -1265,7 +1256,6 @@ declare const StrongText: import("react").ComponentType<{
     display?: ResponsiveStyleValue<import("csstype").Property.Display | undefined>;
     fontStyle?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
     fontWeight?: ResponsiveStyleValue<import("csstype").Property.FontWeight | undefined>;
-    opacity?: ResponsiveStyleValue<import("csstype").Property.Opacity | undefined>;
     textTransform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     transform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     whiteSpace?: ResponsiveStyleValue<import("csstype").Property.WhiteSpace | undefined>;
@@ -1289,9 +1279,7 @@ declare const StrongText: 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;
@@ -1675,7 +1663,6 @@ declare const EmphasisText: import("react").ComponentType<{
     display?: ResponsiveStyleValue<import("csstype").Property.Display | undefined>;
     fontStyle?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
     fontWeight?: ResponsiveStyleValue<import("csstype").Property.FontWeight | undefined>;
-    opacity?: ResponsiveStyleValue<import("csstype").Property.Opacity | undefined>;
     textTransform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     transform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     whiteSpace?: ResponsiveStyleValue<import("csstype").Property.WhiteSpace | undefined>;
@@ -1699,9 +1686,7 @@ declare const EmphasisText: 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;
@@ -2085,7 +2070,6 @@ declare const PlaceholderText: import("react").ComponentType<{
     display?: ResponsiveStyleValue<import("csstype").Property.Display | undefined>;
     fontStyle?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
     fontWeight?: ResponsiveStyleValue<import("csstype").Property.FontWeight | undefined>;
-    opacity?: ResponsiveStyleValue<import("csstype").Property.Opacity | undefined>;
     textTransform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     transform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     whiteSpace?: ResponsiveStyleValue<import("csstype").Property.WhiteSpace | undefined>;
@@ -2109,9 +2093,7 @@ declare const PlaceholderText: 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;
@@ -2495,7 +2477,6 @@ declare const HighlightText: import("react").ComponentType<{
     display?: ResponsiveStyleValue<import("csstype").Property.Display | undefined>;
     fontStyle?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
     fontWeight?: ResponsiveStyleValue<import("csstype").Property.FontWeight | undefined>;
-    opacity?: ResponsiveStyleValue<import("csstype").Property.Opacity | undefined>;
     textTransform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     transform?: ResponsiveStyleValue<import("csstype").Property.TextTransform | undefined>;
     whiteSpace?: ResponsiveStyleValue<import("csstype").Property.WhiteSpace | undefined>;
@@ -2519,9 +2500,7 @@ declare const HighlightText: 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;

package/types/components/content/highlightText.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { Styles } from '../../tasty';
+/**
+ * Highlights occurrences of a search string within text.
+ * Returns an array of ReactNodes with highlighted portions wrapped in Text.Highlight.
+ */
+export declare function highlightText(text: string, highlight: string, caseSensitive: boolean, highlightStyles?: Styles): ReactNode[];

package/types/components/fields/DatePicker/DatePickerElement.d.ts

@@ -68,9 +68,7 @@ export declare const DatePickerElement: 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;

package/types/index.d.ts

@@ -59,6 +59,8 @@ export { Footer } from './components/content/Footer';
 export type { CubeFooterProps } from './components/content/Footer';
 export { Result } from './components/content/Result/Result';
 export type { CubeResultProps, CubeResultStatus, } from './components/content/Result/Result';
+export { Layout, GridLayout } from './components/content/Layout';
+export type { CubeLayoutProps, CubeGridLayoutProps, CubeLayoutToolbarProps, CubeLayoutHeaderProps, CubeLayoutFooterProps, CubeLayoutContentProps, CubeLayoutPaneProps, CubeLayoutPanelProps, CubeLayoutPanelHeaderProps, ScrollbarType, } from './components/content/Layout';
 export * from './components/status';
 export { Base64Upload } from './components/other/Base64Upload/Base64Upload';
 export type { CubeBase64UploadProps } from './components/other/Base64Upload/Base64Upload';

package/types/tasty/index.d.ts

@@ -14,5 +14,5 @@ export * from './utils/getDisplayName';
 export * from './injector';
 export * from './debug';
 export type { TastyProps, GlobalTastyProps, AllBasePropsWithMods, } from './tasty';
-export type { AllBaseProps, BaseProps, BaseStyleProps, DimensionStyleProps, ColorStyleProps, OuterStyleProps, PositionStyleProps, TextStyleProps, BlockStyleProps, ContainerStyleProps, BasePropsWithoutChildren, Props, FlowStyleProps, ShortGridStyles, GlobalStyledProps, TagName, } from './types';
+export type { AllBaseProps, BaseProps, BaseStyleProps, DimensionStyleProps, ColorStyleProps, OuterStyleProps, PositionStyleProps, TextStyleProps, BlockStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, ContainerStyleProps, BasePropsWithoutChildren, Props, FlowStyleProps, ShortGridStyles, GlobalStyledProps, TagName, Mods, } from './types';
 export type { StylesInterface, Styles, StylesWithoutSelectors, NoType, Selector, SuffixForSelector, NotSelector, } from './styles/types';

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

@@ -1,9 +1,12 @@
-export declare const BASE_STYLES: readonly ["display", "font", "preset", "hide", "opacity", "whiteSpace"];
+export declare const BASE_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace"];
 export declare const POSITION_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position"];
-export declare const BLOCK_STYLES: readonly ["reset", "padding", "paddingInline", "paddingBlock", "shadow", "border", "radius", "opacity", "overflow", "scrollbar", "hide", "outline", "textAlign"];
+export declare const BLOCK_INNER_STYLES: readonly ["reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign"];
+export declare const BLOCK_OUTER_STYLES: readonly ["border", "radius", "shadow", "opacity", "outline"];
+export declare const BLOCK_STYLES: readonly ["reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "opacity", "outline"];
 export declare const COLOR_STYLES: readonly ["color", "fill", "fade"];
 export declare const TEXT_STYLES: readonly ["textTransform", "fontWeight", "fontStyle"];
 export declare const DIMENSION_STYLES: readonly ["width", "height", "flexBasis", "flexGrow", "flexShrink", "flex"];
 export declare const FLOW_STYLES: readonly ["flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
-export declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "opacity", "whiteSpace", "color", "fill", "fade", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "reset", "padding", "paddingInline", "paddingBlock", "shadow", "border", "radius", "opacity", "overflow", "scrollbar", "hide", "outline", "textAlign", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
-export declare const OUTER_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex"];
+export declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "color", "fill", "fade", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "opacity", "outline", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+export declare const OUTER_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "border", "radius", "shadow", "opacity", "outline"];
+export declare const INNER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "color", "fill", "fade", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];

package/types/tasty/types.d.ts

@@ -1,10 +1,14 @@
 import { AriaLabelingProps } from '@react-types/shared';
 import { AllHTMLAttributes, CSSProperties } from 'react';
-import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from './styles/list';
+import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from './styles/list';
 import { Styles } from './styles/types';
 export interface GlobalStyledProps {
     breakpoints?: number[];
 }
+/** Type for element modifiers (mods prop) */
+export type Mods = {
+    [key: string]: boolean | string | number | undefined | null;
+};
 type Caps = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
 export interface BasePropsWithoutChildren<K extends TagName = TagName> extends Pick<AllHTMLAttributes<HTMLElement>, 'className' | 'role' | 'id'> {
     as?: K;
@@ -23,9 +27,7 @@ export interface BasePropsWithoutChildren<K extends TagName = TagName> extends P
     /** Whether the element has the inline layout outside */
     inline?: boolean;
     /** The list of element modifiers **/
-    mods?: {
-        [key: string]: boolean | string | number | undefined | null;
-    };
+    mods?: Mods;
     /** Whether the element is hidden (`hidden` attribute is set) */
     isHidden?: boolean;
     /** Whether the element is disabled (`disabled` attribute is set) */
@@ -46,12 +48,15 @@ export interface AllBaseProps<K extends TagName = TagName> extends BaseProps<K>,
 export type BaseStyleProps = Pick<Styles, (typeof BASE_STYLES)[number]>;
 export type PositionStyleProps = Pick<Styles, (typeof POSITION_STYLES)[number]>;
 export type BlockStyleProps = Pick<Styles, (typeof BLOCK_STYLES)[number]>;
+export type BlockInnerStyleProps = Pick<Styles, (typeof BLOCK_INNER_STYLES)[number]>;
+export type BlockOuterStyleProps = Pick<Styles, (typeof BLOCK_OUTER_STYLES)[number]>;
 export type ColorStyleProps = Pick<Styles, (typeof COLOR_STYLES)[number]>;
 export type TextStyleProps = Pick<Styles, (typeof TEXT_STYLES)[number]>;
 export type DimensionStyleProps = Pick<Styles, (typeof DIMENSION_STYLES)[number]>;
 export type FlowStyleProps = Pick<Styles, (typeof FLOW_STYLES)[number]>;
 export type ContainerStyleProps = Pick<Styles, (typeof CONTAINER_STYLES)[number]>;
 export type OuterStyleProps = Pick<Styles, (typeof OUTER_STYLES)[number]>;
+export type InnerStyleProps = Pick<Styles, (typeof INNER_STYLES)[number]>;
 export type ShortGridStyles = {
     template?: Styles['gridTemplate'];
     columns?: Styles['gridColumns'];

package/types/utils/react/index.d.ts

@@ -15,3 +15,4 @@ export { useControlledFocusVisible } from './useControlledFocusVisible';
 export type { UseControlledFocusVisibleResult } from './useControlledFocusVisible';
 export { RenderCache } from './RenderCache';
 export type { RenderCacheProps } from './RenderCache';
+export { useLocalStorage } from './useLocalStorage';