@cube-dev/ui-kit 0.9.9 → 0.9.10

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

@@ -0,0 +1,160 @@
+/// <reference types="react" />
+export declare const StyledMenu: any;
+export declare const StyledDivider: any;
+export declare const StyledMenuHeader: import("react").ComponentType<{
+    styles?: import("../../..").Styles | undefined;
+} & {
+    display?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Display | undefined>;
+    font?: import("../../../utils/styles").ResponsiveStyleValue<boolean | import("csstype").Property.FontFamily | undefined>;
+    preset?: import("../../../utils/styles").ResponsiveStyleValue<string | undefined>;
+    hide?: import("../../../utils/styles").ResponsiveStyleValue<boolean | undefined>;
+    opacity?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Opacity | undefined>;
+    whiteSpace?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.WhiteSpace | undefined>;
+    gridArea?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridArea | undefined>;
+    order?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Order | undefined>;
+    gridColumn?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridColumn | undefined>;
+    gridRow?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridRow | undefined>;
+    placeSelf?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.PlaceSelf | undefined>;
+    alignSelf?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.AlignSelf | undefined>;
+    justifySelf?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.JustifySelf | undefined>;
+    zIndex?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.ZIndex | undefined>;
+    margin?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Margin<string | number> | undefined>;
+    reset?: import("../../../utils/styles").ResponsiveStyleValue<"input" | "button" | undefined>;
+    padding?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Padding<string | number> | undefined>;
+    paddingInline?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.PaddingInline<string | number> | undefined>;
+    paddingBlock?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.PaddingBlock<string | number> | undefined>;
+    shadow?: import("../../../utils/styles").ResponsiveStyleValue<string | undefined>;
+    border?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Border<string | number> | undefined>;
+    radius?: import("../../../utils/styles").ResponsiveStyleValue<string | true | undefined>;
+    overflow?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Overflow | undefined>;
+    styledScrollbar?: import("../../../utils/styles").ResponsiveStyleValue<boolean | undefined>;
+    outline?: import("../../../utils/styles").ResponsiveStyleValue<boolean | import("csstype").Property.FontFamily | undefined>;
+    textAlign?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.TextAlign | undefined>;
+    color?: import("../../../utils/styles").ResponsiveStyleValue<string | boolean | undefined>;
+    fill?: import("../../../utils/styles").ResponsiveStyleValue<string | boolean | undefined>;
+    width?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Width<string | number> | undefined>;
+    height?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Height<string | number> | undefined>;
+    flexBasis?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.FlexBasis<string | number> | undefined>;
+    flexGrow?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.FlexGrow | undefined>;
+    flexShrink?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.FlexShrink | undefined>;
+    flex?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Flex<string | number> | undefined>;
+    flow?: import("../../../utils/styles").ResponsiveStyleValue<(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | "dense" | undefined>;
+    placeItems?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.PlaceItems | undefined>;
+    placeContent?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.PlaceContent | undefined>;
+    alignItems?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.AlignItems | undefined>;
+    alignContent?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.AlignContent | undefined>;
+    justifyItems?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.JustifyItems | undefined>;
+    justifyContent?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.JustifyContent | undefined>;
+    align?: import("../../../utils/styles").ResponsiveStyleValue<(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
+    justify?: import("../../../utils/styles").ResponsiveStyleValue<(string & {}) | "left" | "right" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
+    gap?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Gap<string | number> | undefined>;
+    columnGap?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.ColumnGap<string | number> | undefined>;
+    rowGap?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.RowGap<string | number> | undefined>;
+    gridColumns?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridTemplateColumns<string | number> | undefined>;
+    gridRows?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridTemplateRows<string | number> | undefined>;
+    gridTemplate?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridTemplate | undefined>;
+    gridAreas?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridTemplateAreas | undefined>;
+    direction?: "horizontal" | "vertical" | undefined;
+    mods?: {
+        [key: string]: boolean | null | undefined;
+    } | undefined;
+    block?: boolean | undefined;
+    inline?: boolean | undefined;
+    style?: import("react").CSSProperties | (import("react").CSSProperties & {
+        [key: string]: string | number | null;
+    }) | undefined;
+    element?: string | undefined;
+    css?: string | ((props: import("../../types").Props) => string) | undefined;
+    id?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    qa?: string | undefined;
+    qaVal?: string | number | undefined;
+    isHidden?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    children?: import("react").ReactNode;
+    className?: string | undefined;
+    breakpoints?: number[] | undefined;
+    styleName?: string | undefined;
+    theme?: string | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    key?: import("react").Key | null | undefined;
+}>;
+export declare const StyledMenuItem: any;
+export declare const StyledMenuSectionHeading: import("react").ComponentType<{
+    styles?: import("../../..").Styles | undefined;
+} & {
+    display?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Display | undefined>;
+    font?: import("../../../utils/styles").ResponsiveStyleValue<boolean | import("csstype").Property.FontFamily | undefined>;
+    preset?: import("../../../utils/styles").ResponsiveStyleValue<string | undefined>;
+    hide?: import("../../../utils/styles").ResponsiveStyleValue<boolean | undefined>;
+    opacity?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Opacity | undefined>;
+    whiteSpace?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.WhiteSpace | undefined>;
+    gridArea?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridArea | undefined>;
+    order?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Order | undefined>;
+    gridColumn?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridColumn | undefined>;
+    gridRow?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridRow | undefined>;
+    placeSelf?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.PlaceSelf | undefined>;
+    alignSelf?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.AlignSelf | undefined>;
+    justifySelf?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.JustifySelf | undefined>;
+    zIndex?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.ZIndex | undefined>;
+    margin?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Margin<string | number> | undefined>;
+    reset?: import("../../../utils/styles").ResponsiveStyleValue<"input" | "button" | undefined>;
+    padding?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Padding<string | number> | undefined>;
+    paddingInline?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.PaddingInline<string | number> | undefined>;
+    paddingBlock?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.PaddingBlock<string | number> | undefined>;
+    shadow?: import("../../../utils/styles").ResponsiveStyleValue<string | undefined>;
+    border?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Border<string | number> | undefined>;
+    radius?: import("../../../utils/styles").ResponsiveStyleValue<string | true | undefined>;
+    overflow?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Overflow | undefined>;
+    styledScrollbar?: import("../../../utils/styles").ResponsiveStyleValue<boolean | undefined>;
+    outline?: import("../../../utils/styles").ResponsiveStyleValue<boolean | import("csstype").Property.FontFamily | undefined>;
+    textAlign?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.TextAlign | undefined>;
+    color?: import("../../../utils/styles").ResponsiveStyleValue<string | boolean | undefined>;
+    fill?: import("../../../utils/styles").ResponsiveStyleValue<string | boolean | undefined>;
+    width?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Width<string | number> | undefined>;
+    height?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Height<string | number> | undefined>;
+    flexBasis?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.FlexBasis<string | number> | undefined>;
+    flexGrow?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.FlexGrow | undefined>;
+    flexShrink?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.FlexShrink | undefined>;
+    flex?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Flex<string | number> | undefined>;
+    flow?: import("../../../utils/styles").ResponsiveStyleValue<(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | "dense" | undefined>;
+    placeItems?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.PlaceItems | undefined>;
+    placeContent?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.PlaceContent | undefined>;
+    alignItems?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.AlignItems | undefined>;
+    alignContent?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.AlignContent | undefined>;
+    justifyItems?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.JustifyItems | undefined>;
+    justifyContent?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.JustifyContent | undefined>;
+    align?: import("../../../utils/styles").ResponsiveStyleValue<(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
+    justify?: import("../../../utils/styles").ResponsiveStyleValue<(string & {}) | "left" | "right" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
+    gap?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.Gap<string | number> | undefined>;
+    columnGap?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.ColumnGap<string | number> | undefined>;
+    rowGap?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.RowGap<string | number> | undefined>;
+    gridColumns?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridTemplateColumns<string | number> | undefined>;
+    gridRows?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridTemplateRows<string | number> | undefined>;
+    gridTemplate?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridTemplate | undefined>;
+    gridAreas?: import("../../../utils/styles").ResponsiveStyleValue<import("csstype").Property.GridTemplateAreas | undefined>;
+    direction?: "horizontal" | "vertical" | undefined;
+    mods?: {
+        [key: string]: boolean | null | undefined;
+    } | undefined;
+    block?: boolean | undefined;
+    inline?: boolean | undefined;
+    style?: import("react").CSSProperties | (import("react").CSSProperties & {
+        [key: string]: string | number | null;
+    }) | undefined;
+    element?: string | undefined;
+    css?: string | ((props: import("../../types").Props) => string) | undefined;
+    id?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    qa?: string | undefined;
+    qaVal?: string | number | undefined;
+    isHidden?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    children?: import("react").ReactNode;
+    className?: string | undefined;
+    breakpoints?: number[] | undefined;
+    styleName?: string | undefined;
+    theme?: string | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    key?: import("react").Key | null | undefined;
+}>;

package/types/index.d.ts

@@ -2,7 +2,7 @@
 import { CubeTextProps, Text } from './components/content/Text';
 import { CubeTitleProps, Title } from './components/content/Title';
 import { CubeParagraphProps, Paragraph } from './components/content/Paragraph';
-export { Item } from '@react-stately/collections';
+export { Item, Section } from '@react-stately/collections';
 export { Base } from './components/Base';
 export { Block } from './components/Block';
 export type { CubeBlockProps } from './components/Block';
@@ -78,6 +78,10 @@ export { Radio } from './components/forms/RadioGroup/Radio';
 export type { CubeRadioProps } from './components/forms/RadioGroup/Radio';
 export { ComboBox } from './components/pickers/ComboBox/ComboBox';
 export type { CubeComboBoxProps } from './components/pickers/ComboBox/ComboBox';
+export { Menu } from './components/pickers/Menu/Menu';
+export type { CubeMenuProps } from './components/pickers/Menu/Menu';
+export { MenuTrigger } from './components/pickers/Menu/MenuTrigger';
+export type { CubeMenuTriggerProps } from './components/pickers/Menu/MenuTrigger';
 export { Select, ListBoxPopup } from './components/pickers/Select/Select';
 export type { CubeSelectProps, CubeSelectBaseProps, } from './components/pickers/Select/Select';
 export { NumberInput } from './components/forms/NumberInput/NumberInput';

package/types/shared/form.d.ts

@@ -7,14 +7,16 @@ export declare type LabelPosition = 'side' | 'top';
 export declare type NecessityIndicator = 'icon' | 'label';
 /** The validation state of the field */
 export declare type ValidationState = 'invalid' | 'valid';
-/** On which event perform validation for the field */
+/** On which event perform the validation for the field */
 export declare type ValidateTrigger = 'onBlur' | 'onChange' | 'onSubmit';
 export interface OptionalFieldBaseProps {
     /** The label of the field */
     label?: string;
+    /** An additional content next to the label */
+    extra?: ReactNode;
     /** The validation state of the field */
     validationState?: ValidationState;
-    /** On which event perform validation for the field */
+    /** On which event perform the validation for the field */
     validateTrigger?: ValidateTrigger;
     necessityIndicator?: NecessityIndicator;
     necessityLabel?: ReactNode;
@@ -48,6 +50,8 @@ export interface FormFieldProps extends FormBaseProps {
     insideForm?: boolean;
     /** A text label of the field */
     label?: ReactNode;
+    /** An additional content next to the label */
+    extra?: ReactNode;
     /** Custom label props */
     labelProps?: Props;
     /** Message for the field. Some additional information or error notice */

package/types/stories/FormFieldArgs.d.ts

@@ -20,6 +20,12 @@ export declare const LABEL_ARG: {
         description: string;
     };
 };
+export declare const EXTRA_ARG: {
+    extra: {
+        control: string;
+        description: string;
+    };
+};
 export declare const DESCRIPTION_ARG: {
     description: {
         control: string;

package/types/styled/styled.d.ts

@@ -27,4 +27,5 @@ declare function styled(selector: string, styles?: Styles): any;
 declare function styled<K extends (keyof StylesInterface)[], Props extends {
     styles?: Styles;
 }, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: EitherLegacyPropsOrInlined<K, DefaultProps>): ComponentType<StyledPropsWithDefaults<Props, DefaultProps>>;
-export { styled };
+declare const tasty: typeof styled;
+export { styled, tasty };