@cube-dev/ui-kit 0.0.0-canary-318cc5b → 0.0.0-canary-3161e09

package/es/utils/tree.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-318cc5b
+ * @cube-dev/ui-kit v0.0.0-canary-3161e09
  * Released under the MIT license.
  */
 

package/es/utils/warnings.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-318cc5b
+ * @cube-dev/ui-kit v0.0.0-canary-3161e09
  * Released under the MIT license.
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-318cc5b",
+  "version": "0.0.0-canary-3161e09",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"

package/types/components/actions/Button/Submit.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const _Submit: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>>;
+declare const _Submit: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<unknown>>;
 export { _Submit as Submit };

package/types/components/forms/Slider/elements.d.ts

@@ -1,6 +1,7 @@
-export declare const SliderThumbElement: any;
-export declare const SliderTrackContainerElement: any;
-export declare const SliderGradationElement: any;
-export declare const SliderGradeElement: any;
-export declare const SliderControlsElement: any;
-export declare const SliderElement: any;
+/// <reference types="react" />
+export declare const SliderThumbElement: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
+export declare const SliderTrackContainerElement: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
+export declare const SliderGradationElement: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
+export declare const SliderGradeElement: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
+export declare const SliderControlsElement: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
+export declare const SliderElement: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;

package/types/components/overlays/Dialog/DialogForm.d.ts

@@ -3,7 +3,7 @@ import { CubeFormProps } from '../../forms/Form/Form';
 import { CubeButtonProps } from '../../actions';
 import { FieldTypes } from '../../forms';
 import { CubeDialogProps } from './Dialog';
-export interface CubeDialogFormProps<T extends FieldTypes = FieldTypes> extends Omit<CubeDialogProps, 'children'>, Omit<CubeFormProps<T>, 'role' | 'children'> {
+export interface CubeDialogFormProps<T extends FieldTypes = FieldTypes> extends CubeDialogProps, Omit<CubeFormProps<T>, 'role'> {
     /** Whether the submit button has a `danger` theme */
     danger?: boolean;
     /** Properties for submit button. Use `label` to change text. */
@@ -16,8 +16,6 @@ export interface CubeDialogFormProps<T extends FieldTypes = FieldTypes> extends
     noActions?: boolean;
     /** The title of the dialog */
     title?: string;
-    /** Children nodes or render function  */
-    children?: CubeFormProps['children'] | ((onLocalDismiss: () => void) => CubeFormProps['children']);
 }
 export interface CubeDialogFormRef {
     open: () => void;

package/types/components/overlays/Modal/Underlay.d.ts

@@ -2,8 +2,8 @@ import { HTMLAttributes } from 'react';
 export interface CubeUnderlayProps extends HTMLAttributes<HTMLElement> {
     isOpen?: boolean;
 }
-declare let _Underlay: import("react").ForwardRefExoticComponent<Omit<{
+declare let _Underlay: import("react").ForwardRefExoticComponent<Pick<{
     [x: string]: any;
     isOpen: any;
-}, "ref"> & import("react").RefAttributes<unknown>>;
+}, string | number> & import("react").RefAttributes<unknown>>;
 export { _Underlay as Underlay };

package/types/components/overlays/NewNotifications/NotificationView/NotificationDescription.d.ts

@@ -6,4 +6,6 @@ export type NotificationDescriptionProps = {
 /**
  * @internal This component is unstable and must not be used outside of `NotificationView`.
  */
-export declare const NotificationDescription: import("react").NamedExoticComponent<NotificationDescriptionProps>;
+export declare const NotificationDescription: import("react").NamedExoticComponent<{
+    description: NotificationProps['description'];
+} & HTMLAttributes<HTMLElement>>;

package/types/components/overlays/NewNotifications/NotificationView/NotificationHeader.d.ts

@@ -6,4 +6,6 @@ export type NotificationHeaderProps = {
 /**
  * @internal This component is unstable and must not be used outside of `NotificationView`.
  */
-export declare const NotificationHeader: import("react").NamedExoticComponent<NotificationHeaderProps>;
+export declare const NotificationHeader: import("react").NamedExoticComponent<{
+    header: NotificationProps['header'];
+} & HTMLAttributes<HTMLElement>>;

package/types/components/pickers/Menu/styled.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare const StyledMenu: any;
-export declare const StyledDivider: any;
+export declare const StyledMenu: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
+export declare const StyledDivider: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
 export declare const StyledMenuHeader: import("react").ComponentType<{
     children?: import("react").ReactNode;
     ref?: import("react").Ref<unknown> | undefined;
@@ -59,8 +59,8 @@ export declare const StyledMenuHeader: import("react").ComponentType<{
     gridColumns?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateColumns<string | number> | undefined>;
     gridRows?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateRows<string | number> | undefined>;
     preset?: import("../../../tasty").ResponsiveStyleValue<string | undefined>;
-    align?: import("../../../tasty").ResponsiveStyleValue<"center" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
-    justify?: import("../../../tasty").ResponsiveStyleValue<"center" | "right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
+    align?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
+    justify?: import("../../../tasty").ResponsiveStyleValue<"right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
     block?: boolean | undefined;
     inline?: boolean | undefined;
     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;
@@ -78,8 +78,8 @@ export declare const StyledMenuHeader: import("react").ComponentType<{
     theme?: (string & {}) | "danger" | "default" | "special" | undefined;
     key?: import("react").Key | null | undefined;
 } & {}>;
-export declare const StyledMenuSection: any;
-export declare const StyledMenuItem: any;
+export declare const StyledMenuSection: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
+export declare const StyledMenuItem: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
 export declare const StyledMenuSectionHeading: import("react").ComponentType<{
     children?: import("react").ReactNode;
     ref?: import("react").Ref<unknown> | undefined;
@@ -138,8 +138,8 @@ export declare const StyledMenuSectionHeading: import("react").ComponentType<{
     gridColumns?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateColumns<string | number> | undefined>;
     gridRows?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateRows<string | number> | undefined>;
     preset?: import("../../../tasty").ResponsiveStyleValue<string | undefined>;
-    align?: import("../../../tasty").ResponsiveStyleValue<"center" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
-    justify?: import("../../../tasty").ResponsiveStyleValue<"center" | "right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
+    align?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
+    justify?: import("../../../tasty").ResponsiveStyleValue<"right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
     block?: boolean | undefined;
     inline?: boolean | undefined;
     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;

package/types/stories/components/StyledButton.d.ts

@@ -61,8 +61,8 @@ export declare const StyledButton: import("react").ComponentType<{
     gridColumns?: import("../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateColumns<string | number> | undefined>;
     gridRows?: import("../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateRows<string | number> | undefined>;
     preset?: import("../../tasty").ResponsiveStyleValue<string | undefined>;
-    align?: import("../../tasty").ResponsiveStyleValue<"center" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
-    justify?: import("../../tasty").ResponsiveStyleValue<"center" | "right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
+    align?: import("../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
+    justify?: import("../../tasty").ResponsiveStyleValue<"right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
     size?: "small" | (string & {}) | "medium" | "large" | undefined;
     block?: boolean | undefined;
     inline?: boolean | undefined;

package/types/tasty/index.d.ts

@@ -10,7 +10,7 @@ export * from './styles/list';
 export * from './providers/BreakpointsProvider';
 export * from './utils/mergeStyles';
 export * from './utils/warnings';
-export * from './utils/get-display-name';
+export * from './utils/getDisplayName';
 export type { TastyProps, GlobalTastyProps, AllBasePropsWithMods, } from './tasty';
 export type { AllBaseProps, BaseProps, BaseStyleProps, DimensionStyleProps, ColorStyleProps, OuterStyleProps, PositionStyleProps, TextStyleProps, BlockStyleProps, ContainerStyleProps, BasePropsWithoutChildren, Props, FlowStyleProps, ShortGridStyles, GlobalStyledProps, TagNameProps, TagName, } from './types';
 export type { StylesInterface, Styles, StylesWithoutSelectors, NoType, Selector, SuffixForSelector, NotSelector, } from './styles/types';

package/types/tasty/tasty.d.ts

@@ -5,7 +5,11 @@ import { ResponsiveStyleValue } from './utils/styles';
 type StyleList = readonly (keyof {
     [key in keyof StylesInterface]: StylesInterface[key];
 })[];
-export type TastyProps<K extends StyleList, DefaultProps = Props> = {
+export type VariantMap = Record<string, Styles>;
+export type WithVariant<V extends VariantMap> = {
+    variant?: keyof V;
+};
+export type TastyProps<K extends StyleList, V extends VariantMap, DefaultProps = Props> = {
     /** The tag name of the element. */
     as?: string;
     /** Default styles of the element. */
@@ -13,24 +17,25 @@ export type TastyProps<K extends StyleList, DefaultProps = Props> = {
     /** The list of styles that can be provided by props */
     styleProps?: K;
     element?: BaseProps['element'];
-} & Partial<Omit<DefaultProps, 'as' | 'styles' | 'styleProps'>>;
+    variants?: V;
+} & Partial<Omit<DefaultProps, 'as' | 'styles' | 'styleProps'>> & Pick<BaseProps, 'qa' | 'qaVal'> & WithVariant<V>;
 export interface GlobalTastyProps {
     breakpoints?: number[];
 }
 export type AllBasePropsWithMods<K extends StyleList> = AllBaseProps & {
     [key in K[number]]?: ResponsiveStyleValue<StylesInterface[key]>;
 } & BaseStyleProps;
-type TastyPropsWithDefaults<Props extends {
+type TastyComponentPropsWithDefaults<Props extends {
     styles?: Styles;
 }, DefaultProps extends Partial<Props>> = keyof DefaultProps extends never ? Props : {
     [key in Extract<keyof Props, keyof DefaultProps>]?: Props[key];
 } & {
     [key in keyof Omit<Props, keyof DefaultProps>]: Props[key];
 };
-declare function tasty<K extends StyleList>(options: TastyProps<K>, secondArg?: never): any;
+declare function tasty<K extends StyleList, V extends VariantMap>(options: TastyProps<K, V>, secondArg?: never): ComponentType<Omit<Props, 'variant'> & WithVariant<V>>;
 declare function tasty(selector: string, styles?: Styles): any;
 declare function tasty<Props extends {
     styles?: Styles;
-}, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: TastyProps<never, Props>): ComponentType<TastyPropsWithDefaults<Props, DefaultProps>>;
-declare const Element: any;
+}, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: TastyProps<never, never, Props>): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;
+declare const Element: ComponentType<Omit<Props, "variant"> & WithVariant<VariantMap>>;
 export { tasty, Element };

package/types/tasty/utils/cache-wrapper.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Create a function that caches the result up to the limit.
+ */
+export declare function cacheWrapper<T extends (firstArg: any, secondArg?: string) => any>(handler: T, limit?: number): T;

package/types/tasty/utils/case-converter.d.ts

@@ -0,0 +1 @@
+export declare function camelToKebab(str: string): string;

package/types/tasty/utils/modAttrs.d.ts

@@ -2,4 +2,6 @@
  * Generate data DOM attributes from modifier map.
  */
 import { AllBaseProps } from '../types';
-export declare function modAttrs(map: AllBaseProps['mods']): Record<string, string> | null;
+declare function modAttrs(map: AllBaseProps['mods']): Record<string, string> | null;
+declare const _modAttrs: typeof modAttrs;
+export { _modAttrs as modAttrs };

package/types/tasty/utils/renderStyles.d.ts

@@ -7,4 +7,4 @@ export declare function isSelector(key: any): any;
  * @param {string} [suffix]
  * @return {string}
  */
-export declare function renderStyles(styles: Styles, responsive: number[], suffix?: string): any;
+export declare function renderStyles(styles?: Styles, responsive?: number[], suffix?: string): any;

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

@@ -189,8 +189,4 @@ export declare const COMPUTE_FUNC_MAP: {
 export declare function computeState(computeModel: ComputeModel, valueMap: (number | boolean)[] | {
     [key: string]: boolean;
 } | Function): any;
-/**
- * Create a function that caches the result up to the limit.
- */
-export declare function cacheWrapper<T extends (firstArg: any, secondArg?: string) => any>(handler: T, limit?: number): T;
 export {};