@cube-dev/ui-kit 0.95.0 → 0.96.0

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/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';

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

@@ -0,0 +1,33 @@
+/** Like React.setState: either a value or a function of the previous value */
+type Updater<T> = T | ((prev: T) => T);
+/**
+ * A hook to persist state in localStorage with cross-instance synchronization.
+ *
+ * Features:
+ * - JSON serialization/deserialization
+ * - Syncs between hook instances with the same key (same tab)
+ * - Syncs across browser tabs via storage event
+ * - SSR-safe (gracefully handles missing localStorage)
+ * - Supports lazy initial value
+ *
+ * @param key - The localStorage key. Pass `null` or `undefined` to disable the hook.
+ * @param initialValue - Initial value or lazy initializer function
+ * @returns Tuple of [value, setValue] similar to useState
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const [theme, setTheme] = useLocalStorage('theme', 'light');
+ *
+ * // With lazy initializer
+ * const [settings, setSettings] = useLocalStorage('settings', () => getDefaultSettings());
+ *
+ * // Disabled (returns initialValue, setValue is no-op)
+ * const [value, setValue] = useLocalStorage(null, 'default');
+ *
+ * // Conditionally enabled
+ * const [data, setData] = useLocalStorage(isEnabled ? 'my-key' : null, {});
+ * ```
+ */
+export declare function useLocalStorage<T>(key: string | null | undefined, initialValue: T | (() => T)): readonly [T, (value: Updater<T>) => void];
+export {};