@cube-dev/ui-kit 0.14.9 → 0.14.12

package/types/components/actions/index.d.ts

@@ -7,4 +7,5 @@ declare const Button: import("react").ForwardRefExoticComponent<import("./Button
 };
 export * from './Button';
 export * from './Action';
+export * from './use-action';
 export { Button, ButtonGroup };

package/types/components/actions/use-action.d.ts

@@ -0,0 +1,42 @@
+import { MouseEventHandler } from 'react';
+import { AriaButtonProps } from '@react-types/button';
+import { FocusableRef } from '@react-types/shared';
+import { BaseProps, TagNameProps } from '../../tasty';
+export interface CubeUseActionProps extends BaseProps, TagNameProps, Omit<AriaButtonProps, 'type'> {
+    to?: string;
+    label?: string;
+    htmlType?: 'button' | 'submit' | 'reset' | undefined;
+    onClick?: MouseEventHandler;
+    onMouseEnter?: MouseEventHandler;
+    onMouseLeave?: MouseEventHandler;
+}
+/**
+ * Helper to open link.
+ * @param {String} href
+ * @param {String|Boolean} [target]
+ */
+export declare function openLink(href: any, target?: any): void;
+export declare function parseTo(to: any): {
+    newTab: boolean;
+    nativeRoute: boolean;
+    href: string | undefined;
+};
+export declare function performClickHandler(evt: any, router: any, to: any, onPress: any): void;
+export declare const useAction: ({ to, as, htmlType, label, mods, onPress, ...props }: CubeUseActionProps, ref: FocusableRef<HTMLElement>) => {
+    actionProps: {
+        'aria-label': string | undefined;
+        ref: import("react").RefObject<HTMLElement>;
+        type: "button" | "reset" | "submit";
+        rel: string | undefined;
+        as: "object" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "font" | "dir" | "frame" | "frameset" | "marquee";
+        isDisabled: boolean | undefined;
+        target: string | undefined;
+        href: string | undefined;
+        mods: {
+            hovered: boolean;
+            pressed: boolean;
+            focused: boolean;
+            disabled: boolean | undefined;
+        };
+    };
+};

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import THEMES from '../../../data/themes';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 export interface CubeTagProps extends BaseProps, ContainerStyleProps {
@@ -6,6 +6,7 @@ export interface CubeTagProps extends BaseProps, ContainerStyleProps {
     isClosable?: boolean;
     onClose?: () => void;
     closeButtonStyles?: Styles;
+    icon?: ReactNode;
 }
 declare const _Tag: import("react").ForwardRefExoticComponent<CubeTagProps & import("react").RefAttributes<unknown>>;
 export { _Tag as Tag };

package/types/components/forms/RangeSlider/RangeInput.d.ts

@@ -6,5 +6,6 @@ export interface RangeInputProps extends CubeNumberInputProps {
     state: SliderState;
     min?: number;
     max?: number;
+    width?: string;
 }
 export declare function RangeInput(props: RangeInputProps): JSX.Element;

package/types/components/forms/RangeSlider/RangeSlider.d.ts

@@ -1,15 +1,17 @@
 /// <reference types="react" />
 import { FormFieldProps } from '../../../shared';
 import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Styles } from '../../../tasty';
+import { CubeNumberInputProps } from '../NumberInput/NumberInput';
 import { SliderValue } from './helpers';
 import type { AriaSliderProps, SliderProps } from '@react-types/slider';
-export interface CubeRangeSliderProps extends AriaSliderProps<SliderValue>, SliderProps<SliderValue>, BasePropsWithoutChildren, OuterStyleProps, FormFieldProps, BlockStyleProps {
+export interface CubeRangeSliderProps extends Omit<AriaSliderProps<SliderValue>, 'label'>, Omit<SliderProps<SliderValue>, 'label'>, BasePropsWithoutChildren, OuterStyleProps, FormFieldProps, BlockStyleProps {
     showInput?: boolean;
-    inputSuffix?: string;
     inputStyles?: Styles;
     gradation?: string[];
     onChange?: (range: SliderValue) => void;
     onChangeEnd?: (range: SliderValue) => void;
+    inputWidth?: string;
+    formatOptions?: CubeNumberInputProps['formatOptions'];
 }
 declare const __RangeSlider: import("react").ForwardRefExoticComponent<CubeRangeSliderProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>> & {
     cubeInputType: string;

package/types/components/forms/RangeSlider/helpers.d.ts

@@ -1,6 +1,6 @@
-export declare type SliderValue = number[];
+export declare type SliderValue = number[] | number;
 export declare function getRanges(value: any): number[];
 export declare function isNumber(val: any): val is number;
 export declare function isValueValid(value?: SliderValue): value is number[];
-export declare function getValidValue(value?: SliderValue, min?: number, max?: number): number[] | undefined;
+export declare function getValidValue(value?: SliderValue, min?: number, max?: number): number | number[] | undefined;
 export declare function getMinMaxValue(min?: number, max?: number, value?: SliderValue): (number | undefined)[];

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

@@ -75,7 +75,7 @@ export declare const StyledMenuHeader: import("react").ComponentType<{
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
     styleName?: string | undefined;
-    theme?: (string & {}) | "danger" | "default" | undefined;
+    theme?: (string & {}) | "danger" | "default" | "special" | undefined;
     key?: import("react").Key | null | undefined;
 } & {}>;
 export declare const StyledMenuSection: any;
@@ -154,6 +154,6 @@ export declare const StyledMenuSectionHeading: import("react").ComponentType<{
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
     styleName?: string | undefined;
-    theme?: (string & {}) | "danger" | "default" | undefined;
+    theme?: (string & {}) | "danger" | "default" | "special" | undefined;
     key?: import("react").Key | null | undefined;
 } & {}>;

package/types/components/pickers/Select/Select.d.ts

@@ -2,7 +2,6 @@ import { ReactElement, ReactNode, RefObject } from 'react';
 import { Item } from '@react-stately/collections';
 import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Props, Styles } from '../../../tasty';
 import { FormFieldProps } from '../../../shared';
-import { CubeButtonProps } from '../../actions';
 import type { AriaSelectProps } from '@react-types/select';
 export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, OuterStyleProps, FormFieldProps, BlockStyleProps, AriaSelectProps<T> {
     icon?: ReactElement;
@@ -21,7 +20,7 @@ export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, OuterS
     direction?: 'top' | 'bottom';
     shouldFlip?: boolean;
     inputProps?: Props;
-    type?: CubeButtonProps['type'];
+    type?: 'secondary' | 'clear' | 'primary' | (string & {});
     suffixPosition?: 'before' | 'after';
 }
 export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
@@ -29,6 +28,7 @@ export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
     /** The ref for the list box. */
     listBoxRef?: RefObject<HTMLElement>;
     size?: 'small' | 'default' | 'large' | string;
+    ellipsis?: boolean;
 }
 export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus, placement, minWidth, ...otherProps }: {
     [x: string]: any;

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

@@ -78,7 +78,7 @@ export declare const StyledButton: import("react").ComponentType<{
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
     styleName?: string | undefined;
-    theme?: (string & {}) | "danger" | "default" | undefined;
+    theme?: (string & {}) | "danger" | "default" | "special" | undefined;
     as?: keyof HTMLElementTagNameMap | undefined;
     autoFocus?: boolean | undefined;
     href?: string | undefined;

package/types/tasty/types.d.ts

@@ -37,7 +37,7 @@ export interface BasePropsWithoutChildren extends Pick<AllHTMLAttributes<HTMLEle
         [key: string]: string | number | null;
     });
     /** User-defined theme for the element. Mapped to data-theme attribute. Use `default`, or `danger`, or any custom string value you need. */
-    theme?: 'default' | 'danger' | (string & {});
+    theme?: 'default' | 'danger' | 'special' | (string & {});
 }
 export interface BaseProps extends BasePropsWithoutChildren, Pick<AllHTMLAttributes<HTMLElementTagNameMap['div']>, 'children'> {
 }

package/types/tokens.d.ts

@@ -67,80 +67,99 @@ declare const TOKENS: {
     'h5-line-height': string;
     'h5-letter-spacing': string;
     'h5-font-weight': string;
+    'h5-icon-size': string;
     'h5s-font-size': string;
     'h5s-line-height': string;
     'h5s-letter-spacing': string;
     'h5s-font-weight': string;
+    'h5s-icon-size': string;
     'h5m-font-size': string;
     'h5m-line-height': string;
     'h5m-letter-spacing': string;
     'h5m-font-weight': string;
+    'h5m-icon-size': string;
     'h6-font-size': string;
     'h6-line-height': string;
     'h6-letter-spacing': string;
     'h6-font-weight': string;
+    'h6-icon-size': string;
     't1-font-size': string;
     't1-line-height': string;
     't1-letter-spacing': string;
     't1-font-weight': string;
+    't1-icon-size': string;
     't2-font-size': string;
     't2-line-height': string;
     't2-letter-spacing': string;
     't2-font-weight': string;
+    't2-icon-size': string;
     't2m-font-size': string;
     't2m-line-height': string;
     't2m-letter-spacing': string;
     't2m-font-weight': string;
+    't2m-icon-size': string;
     't3-font-size': string;
     't3-line-height': string;
     't3-letter-spacing': string;
     't3-font-weight': string;
+    't3-icon-size': string;
     't3m-font-size': string;
     't3m-line-height': string;
     't3m-letter-spacing': string;
     't3m-font-weight': string;
+    't3m-icon-size': string;
     't3s-font-size': string;
     't3s-line-height': string;
     't3s-letter-spacing': string;
     't3s-font-weight': string;
+    't3s-icon-size': string;
     't4-font-size': string;
     't4-line-height': string;
     't4-letter-spacing': string;
     't4-font-weight': string;
+    't4-icon-size': string;
     't4m-font-size': string;
     't4m-line-height': string;
     't4m-letter-spacing': string;
     't4m-font-weight': string;
+    't4m-icon-size': string;
     'p1-font-size': string;
     'p1-line-height': string;
     'p1-letter-spacing': string;
     'p1-font-weight': string;
+    'p1-icon-size': string;
     'p2-font-size': string;
     'p2-line-height': string;
     'p2-letter-spacing': string;
     'p2-font-weight': string;
+    'p2-icon-size': string;
     'p3-font-size': string;
     'p3-line-height': string;
     'p3-letter-spacing': string;
     'p3-font-weight': string;
+    'p3-icon-size': string;
     'p4-font-size': string;
     'p4-line-height': string;
     'p4-letter-spacing': string;
     'p4-font-weight': string;
+    'p4-icon-size': string;
     'c1-font-size': string;
     'c1-line-height': string;
     'c1-letter-spacing': string;
     'c1-font-weight': string;
     'c1-text-transform': string;
+    'c1-icon-size': string;
     'c2-font-size': string;
     'c2-line-height': string;
     'c2-letter-spacing': string;
     'c2-font-weight': string;
     'c2-text-transform': string;
+    'c2-icon-size': string;
     'tag-font-size': string;
     'tag-line-height': string;
     'tag-letter-spacing': string;
     'tag-font-weight': string;
+    'tag-icon-size': string;
     'strong-font-size': string;
     'strong-line-height': string;
     'strong-letter-spacing': string;
@@ -158,6 +177,7 @@ declare const TOKENS: {
     'default-letter-spacing': string;
     'default-font-weight': string;
     'default-bold-font-weight': string;
+    'default-icon-size': string;
     'scrollbar-width': string;
     'scrollbar-outline-width': string;
     'scrollbar-radius': string;