@cube-dev/ui-kit 0.1.2 → 0.2.0

package/dist/cjs/{atoms → components/other}/CloudLogo/CloudLogo.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { CubeButtonProps } from '../Button/Button';
+import { CubeButtonProps } from '../../actions/Button/Button';
 declare const _CloudLogo: import("react").ForwardRefExoticComponent<CubeButtonProps & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
 export { _CloudLogo as CloudLogo };

package/dist/cjs/{molecules → components/overlays}/AlertDialog/AlertDialog.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { CubeButtonProps } from '../../atoms/Button/Button';
-import { CubeDialogProps } from '../../atoms/Dialog/Dialog';
+import { CubeButtonProps } from '../../actions/Button/Button';
+import { CubeDialogProps } from '../Dialog/Dialog';
 export interface CubeAlertDialogProps extends CubeDialogProps {
     /** Whether the dialog is an important prompt */
     danger?: boolean;

package/dist/{mjs/atoms → cjs/components/overlays}/Dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseProps } from '../../components/types';
+import { BaseProps } from '../../types';
 import { AriaDialogProps } from '@react-types/dialog';
 export interface CubeDialogProps extends Omit<BaseProps, 'role'>, AriaDialogProps {
     type?: 'modal' | 'popover' | 'fullscreen' | 'fullscreenTakeover' | 'panel' | 'tray';

package/dist/{mjs/atoms → cjs/components/overlays}/Dialog/DialogTrigger.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, RefObject } from 'react';
-import { NuStyles } from '../../styles/types';
+import { Styles } from '../../../styles/types';
 export declare type CubeDialogClose = (close: () => void) => ReactElement;
 export interface CubeDialogTriggerProps {
     /** The Dialog and its trigger element. See the DialogTrigger [Content section](#content) for more information on what to provide as children. */
@@ -24,7 +24,7 @@ export interface CubeDialogTriggerProps {
     /** The screen breakpoint for the mobile type */
     mobileViewport?: number;
     /** The style map for the overlay **/
-    styles?: NuStyles;
+    styles?: Styles;
 }
 declare function DialogTrigger(props: any): JSX.Element;
 /**

package/dist/{mjs/atoms → cjs/components/overlays}/Dialog/api.d.ts

@@ -1,4 +1,4 @@
-import { CubeAlertDialogProps } from '../../molecules/AlertDialog/AlertDialog';
+import { CubeAlertDialogProps } from '../AlertDialog/AlertDialog';
 import { CubeDialogContainerProps } from './DialogContainer';
 import { ReactNode } from 'react';
 export interface DialogData extends Omit<CubeDialogContainerProps, 'onDismiss'>, Omit<CubeAlertDialogProps, 'type' | 'id'> {

package/dist/{mjs/atoms → cjs/components/overlays}/Dialog/index.d.ts

@@ -6,5 +6,5 @@ declare const _Dialog: import("react").ForwardRefExoticComponent<CubeDialogProps
     confirm: (options: any) => void;
     info: (options: any) => void;
 };
-export { _Dialog as Dialog, DialogContainer, DialogTrigger, };
+export { _Dialog as Dialog, DialogContainer, DialogTrigger };
 export type { CubeDialogProps, CubeDialogTriggerProps, CubeDialogContainerProps, };

package/dist/cjs/{atoms → components/overlays}/Modal/Modal.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-import { NuStyles } from '../../styles/types';
-import { BaseProps } from '../../components/types';
+import { Styles } from '../../../styles/types';
+import { BaseProps } from '../../types';
 import { ModalProps } from '@react-types/overlays';
-export declare const OVERLAY_WRAPPER_STYLES: NuStyles;
+export declare const OVERLAY_WRAPPER_STYLES: Styles;
 export interface CubeModalProps extends ModalProps {
     qa?: BaseProps['qa'];
     onClose?: () => void;
     type?: 'modal' | 'fullscreen' | 'fullscreenTakeover';
-    styles?: NuStyles;
+    styles?: Styles;
 }
 declare let _Modal: import("react").ForwardRefExoticComponent<CubeModalProps & import("react").RefAttributes<unknown>>;
 export { _Modal as Modal };

package/dist/{mjs/atoms → cjs/components/overlays}/Modal/Popover.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { OverlayProps } from '@react-types/overlays';
-import { BaseProps } from '../../components/types';
-import { PlacementAxis } from '../../shared';
+import { BaseProps } from '../../types';
+import { PlacementAxis } from '../../../shared';
 export interface CubePopoverProps extends BaseProps, Omit<OverlayProps, 'children'> {
     placement?: PlacementAxis;
     arrowProps?: HTMLAttributes<HTMLElement>;

package/dist/cjs/{atoms → components/overlays}/Modal/Tray.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-import { NuStyles } from '../../styles/types';
-import { BaseProps } from '../../components/types';
+import { Styles } from '../../../styles/types';
+import { BaseProps } from '../../types';
 import { TrayProps } from '@react-types/overlays';
 export interface CubeTrayProps extends TrayProps {
     qa?: BaseProps['qa'];
     onClose?: () => void;
     isFixedHeight?: boolean;
     isNonModal?: boolean;
-    styles?: NuStyles;
+    styles?: Styles;
 }
 declare let _Tray: import("react").ForwardRefExoticComponent<CubeTrayProps & import("react").RefAttributes<unknown>>;
 export { _Tray as Tray };

package/dist/cjs/{molecules → components/overlays}/Notification/Notification.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CubeCardProps } from '../../atoms/Card/Card';
+import { CubeCardProps } from '../../content/Card/Card';
 export interface CubeNotificationProps extends CubeCardProps {
     type?: 'success' | 'note' | 'danger';
     onClose?: () => void;

package/dist/cjs/components/overlays/OverlayWrapper.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface CubeOverlayWrapperProps {
+    isOpen?: boolean;
+    placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom';
+    children: ReactNode;
+    childrenOnly?: boolean;
+    minOffset?: string | number;
+    minScale?: string;
+    withoutTransition?: boolean;
+}
+export declare function OverlayWrapper({ isOpen, placement, minOffset, minScale, withoutTransition, children, childrenOnly, }: CubeOverlayWrapperProps): JSX.Element;

package/dist/{mjs/atoms → cjs/components/overlays}/Tooltip/Tooltip.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { NuStyles } from '../../styles/types';
-import { BaseProps, ContainerStyleProps } from '../../components/types';
+import { Styles } from '../../../styles/types';
+import { BaseProps, ContainerStyleProps } from '../../types';
 import { AriaTooltipProps } from '@react-types/tooltip';
-import { PlacementAxis } from '../../shared';
+import { PlacementAxis } from '../../../shared';
 export interface CubeTooltipProps extends BaseProps, ContainerStyleProps, AriaTooltipProps {
-    tipStyles?: NuStyles;
+    tipStyles?: Styles;
     showIcon?: boolean;
     placement?: PlacementAxis;
 }

package/dist/{mjs/atoms → cjs/components/overlays}/Tooltip/context.d.ts

@@ -1,13 +1,15 @@
 import React, { HTMLAttributes, RefObject } from 'react';
 import { TooltipTriggerState } from '@react-stately/tooltip';
-import { PlacementAxis } from '../../shared';
-import { Props } from '../../components/types';
+import { PlacementAxis } from '../../../shared';
+import { Props } from '../../types';
 interface TooltipContextProps {
     state?: TooltipTriggerState;
     ref?: RefObject<HTMLDivElement>;
     placement?: PlacementAxis;
     arrowProps?: HTMLAttributes<HTMLElement>;
     overlayProps?: Props;
+    minScale?: string | number;
+    minOffset?: string | number;
 }
 export declare const TooltipContext: React.Context<TooltipContextProps>;
 export {};

package/dist/{mjs/atoms → cjs/components/pickers}/ComboBox/ComboBox.d.ts

@@ -2,7 +2,7 @@ import { RefObject } from 'react';
 import { CubeSelectBaseProps } from '../Select/Select';
 import { CollectionBase, KeyboardDelegate, LoadingState } from '@react-types/shared';
 import { ComboBoxProps } from '@react-types/combobox';
-export interface CubeComboBoxProps<T> extends CubeSelectBaseProps, ComboBoxProps<T>, CollectionBase<T> {
+export interface CubeComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOpenChange'>, ComboBoxProps<T>, CollectionBase<T> {
     multiLine?: boolean;
     autoComplete?: string;
     inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>;

package/dist/{mjs/atoms → cjs/components/pickers}/Select/Select.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode, RefObject } from 'react';
-import { NuStyles } from '../../styles/types';
-import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Props } from '../../components/types';
+import { Styles } from '../../../styles/types';
+import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Props } from '../../types';
 import { AriaSelectProps } from '@react-types/select';
-import { FormFieldProps } from '../../shared';
-export interface CubeSelectBaseProps extends BasePropsWithoutChildren, OuterStyleProps, FormFieldProps, BlockStyleProps {
+import { FormFieldProps } from '../../../shared';
+export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, OuterStyleProps, FormFieldProps, BlockStyleProps, AriaSelectProps<T> {
     prefix?: ReactNode;
     suffix?: ReactNode;
     triggerRef?: RefObject<HTMLButtonElement>;
@@ -11,18 +11,19 @@ export interface CubeSelectBaseProps extends BasePropsWithoutChildren, OuterStyl
     loadingIndicator?: ReactNode;
     overlayOffset?: number;
     hideTrigger?: boolean;
-    inputStyles?: NuStyles;
-    optionStyles?: NuStyles;
-    triggerStyles?: NuStyles;
-    listBoxStyles?: NuStyles;
-    overlayStyles?: NuStyles;
+    inputStyles?: Styles;
+    optionStyles?: Styles;
+    triggerStyles?: Styles;
+    listBoxStyles?: Styles;
+    overlayStyles?: Styles;
     direction?: 'top' | 'bottom';
     shouldFlip?: boolean;
     inputProps?: Props;
 }
-export interface CubeSelectProps<T> extends CubeSelectBaseProps, AriaSelectProps<T> {
+export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
     popoverRef?: RefObject<HTMLInputElement>;
-    listBoxRef?: RefObject<HTMLInputElement>;
+    /** The ref for the list box. */
+    listBoxRef?: RefObject<HTMLElement>;
 }
 export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, disallowEmptySelection, shouldUseVirtualFocus, placement, ...otherProps }: {
     [x: string]: any;

package/dist/cjs/{atoms → components/status}/LoadingAnimation/LoadingAnimation.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CubeBlockProps } from '../../components/Block';
+import { CubeBlockProps } from '../../Block';
 export interface CubeLoadingAnimationProps extends CubeBlockProps {
     size?: 'small' | 'medium' | 'large' | number;
 }

package/dist/{mjs/atoms → cjs/components/status}/Spin/Spin.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CubeBlockProps } from '../../components/Block';
+import { CubeBlockProps } from '../../Block';
 export interface CubeSpinProps extends CubeBlockProps {
     size?: 'small' | 'default' | 'large' | number;
     spinning?: boolean;

package/dist/cjs/components/types.d.ts

@@ -1,5 +1,5 @@
-import { AllHTMLAttributes, CSSProperties, JSXElementConstructor, ReactElement, ReactNodeArray, ReactPortal } from 'react';
-import { NuStyles } from '../styles/types';
+import { AllHTMLAttributes, CSSProperties } from 'react';
+import { Styles } from '../styles/types';
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from '../styles/list';
 export interface BasePropsWithoutChildren extends Pick<AllHTMLAttributes<HTMLElement>, 'className' | 'role' | 'id'> {
     /** QA ID for e2e testing **/
@@ -8,7 +8,7 @@ export interface BasePropsWithoutChildren extends Pick<AllHTMLAttributes<HTMLEle
     qaVal?: string | number;
     /** The tag name of the element **/
     /** The style map **/
-    styles?: NuStyles;
+    styles?: Styles;
     /** The list of responsive points in pixels **/
     breakpoints?: number[];
     /** Whether the element has the block layout outside **/
@@ -34,30 +34,29 @@ export interface BasePropsWithoutChildren extends Pick<AllHTMLAttributes<HTMLEle
         [key: string]: string | number | null;
     });
 }
-export interface BaseProps extends BasePropsWithoutChildren {
-    children?: ReactElement<any, string | JSXElementConstructor<any>> | string | number | {} | ReactNodeArray | ReactPortal | boolean | null | undefined;
+export interface BaseProps extends BasePropsWithoutChildren, Pick<AllHTMLAttributes<HTMLElementTagNameMap['div']>, 'children'> {
 }
 export interface AllBaseProps<K extends keyof HTMLElementTagNameMap = 'div'> extends BaseProps, Omit<AllHTMLAttributes<HTMLElementTagNameMap[K]>, 'style'> {
-    as?: K;
+    as?: string;
 }
-export declare type BaseStyleProps = Pick<NuStyles, typeof BASE_STYLES[number]>;
-export declare type PositionStyleProps = Pick<NuStyles, typeof POSITION_STYLES[number]>;
-export declare type BlockStyleProps = Pick<NuStyles, typeof BLOCK_STYLES[number]>;
-export declare type ColorStyleProps = Pick<NuStyles, typeof COLOR_STYLES[number]>;
-export declare type TextStyleProps = Pick<NuStyles, typeof TEXT_STYLES[number]>;
-export declare type DimensionStyleProps = Pick<NuStyles, typeof DIMENSION_STYLES[number]>;
-export declare type FlowStyleProps = Pick<NuStyles, typeof FLOW_STYLES[number]>;
-export declare type ContainerStyleProps = Pick<NuStyles, typeof CONTAINER_STYLES[number]>;
-export declare type OuterStyleProps = Pick<NuStyles, typeof OUTER_STYLES[number]>;
+export declare type BaseStyleProps = Pick<Styles, typeof BASE_STYLES[number]>;
+export declare type PositionStyleProps = Pick<Styles, typeof POSITION_STYLES[number]>;
+export declare type BlockStyleProps = Pick<Styles, typeof BLOCK_STYLES[number]>;
+export declare type ColorStyleProps = Pick<Styles, typeof COLOR_STYLES[number]>;
+export declare type TextStyleProps = Pick<Styles, typeof TEXT_STYLES[number]>;
+export declare type DimensionStyleProps = Pick<Styles, typeof DIMENSION_STYLES[number]>;
+export declare type FlowStyleProps = Pick<Styles, typeof FLOW_STYLES[number]>;
+export declare type ContainerStyleProps = Pick<Styles, typeof CONTAINER_STYLES[number]>;
+export declare type OuterStyleProps = Pick<Styles, typeof OUTER_STYLES[number]>;
 export declare type ShortItemsStyles = {
-    align?: NuStyles['alignItems'];
-    justify?: NuStyles['justifyItems'];
+    align?: Styles['alignItems'];
+    justify?: Styles['justifyItems'];
 };
 export declare type ShortGridStyles = {
-    template?: NuStyles['gridTemplate'];
-    columns?: NuStyles['gridColumns'];
-    rows?: NuStyles['gridRows'];
-    areas?: NuStyles['gridAreas'];
+    template?: Styles['gridTemplate'];
+    columns?: Styles['gridColumns'];
+    rows?: Styles['gridRows'];
+    areas?: Styles['gridAreas'];
 };
 export interface Props {
     [key: string]: any;

package/dist/cjs/css-properties.d.ts

@@ -17,6 +17,7 @@ declare const PROPS: {
     'minor-color': string;
     'success-bg-color': string;
     'note-bg-color': string;
+    'note-text-color': string;
     'danger-bg-color': string;
     'danger-bg-hover-color': string;
     'primary-1': string;
@@ -64,15 +65,76 @@ declare const PROPS: {
     'h1-font-size': string;
     'h1-line-height': string;
     'h1-letter-spacing': string;
+    'h1-font-weight': string;
     'h2-font-size': string;
     'h2-line-height': string;
+    'h2-letter-spacing': string;
+    'h2-font-weight': string;
     'h3-font-size': string;
     'h3-line-height': string;
+    'h3-letter-spacing': string;
+    'h3-font-weight': string;
     'h4-font-size': string;
     'h4-line-height': string;
+    'h4-letter-spacing': string;
+    'h4-font-weight': string;
     'h5-font-size': string;
     'h5-line-height': string;
+    'h5-letter-spacing': string;
+    'h5-font-weight': string;
+    'h5s-font-size': string;
+    'h5s-line-height': string;
+    'h5s-letter-spacing': string;
+    'h5s-font-weight': string;
+    'h5m-font-size': string;
+    'h5m-line-height': string;
+    'h5m-letter-spacing': string;
+    'h5m-font-weight': string;
     'h6-font-size': string;
     'h6-line-height': string;
+    't1-font-size': string;
+    't1-line-height': string;
+    't1-letter-spacing': string;
+    't1-font-weight': string;
+    't2-font-size': string;
+    't2-line-height': string;
+    't2-letter-spacing': string;
+    't2-font-weight': string;
+    't3-font-size': string;
+    't3-line-height': string;
+    't3-letter-spacing': string;
+    't3-font-weight': string;
+    't4-font-size': string;
+    't4-line-height': string;
+    't4-letter-spacing': string;
+    't4-font-weight': string;
+    't4m-font-size': string;
+    't4m-line-height': string;
+    't4m-letter-spacing': string;
+    't4m-font-weight': string;
+    'p1-font-size': string;
+    'p1-line-height': string;
+    'p1-letter-spacing': string;
+    'p1-font-weight': string;
+    'p2-font-size': string;
+    'p2-line-height': string;
+    'p2-letter-spacing': string;
+    'p2-font-weight': string;
+    'p3-font-size': string;
+    'p3-line-height': string;
+    'p3-letter-spacing': string;
+    'p3-font-weight': string;
+    'p4-font-size': string;
+    'p4-line-height': string;
+    'p4-letter-spacing': string;
+    'p4-font-weight': string;
+    'tag-font-size': string;
+    'tag-line-height': string;
+    'tag-letter-spacing': string;
+    'tag-font-weight': string;
+    'default-font-size': string;
+    'default-line-height': string;
+    'default-letter-spacing': string;
+    'default-font-weight': string;
 };
 export default PROPS;

package/dist/cjs/data/themes.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
     };
     readonly note: {
         readonly fill: "#note-bg";
-        readonly color: "#note";
+        readonly color: "#note-text";
         readonly border: "#note.40";
     };
     readonly disabled: {