@cube-dev/ui-kit 0.0.0-canary-378ade6 → 0.0.0-canary-25338a3

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

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import { Styles } from '../../../tasty';
 import { CubeActionProps } from '../Action/Action';
 export interface CubeButtonProps extends CubeActionProps {
     icon?: ReactElement;
@@ -15,10 +16,6 @@ export declare const DEFAULT_BUTTON_STYLES: {
     readonly position: "relative";
     readonly margin: 0;
     readonly boxSizing: "border-box";
-    readonly outline: {
-        readonly '': "#purple-03.0";
-        readonly focused: "#purple-03";
-    };
     readonly cursor: "pointer";
     readonly gap: {
         readonly '': ".75x";
@@ -59,498 +56,28 @@ export declare const DEFAULT_BUTTON_STYLES: {
         readonly '[data-type="link"] & !focused': 0;
     };
 };
-export declare const DEFAULT_PRIMARY_STYLES: {
-    readonly outline: {
-        readonly '': "0 #purple-text.0";
-        readonly focused: "1bw #purple-text";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly pressed: "#purple-text";
-        readonly focused: "#purple-text";
-    };
-    readonly fill: {
-        readonly '': "#purple";
-        readonly hovered: "#purple-text";
-        readonly pressed: "#purple";
-    };
-    readonly color: {
-        readonly '': "#white";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const DEFAULT_SECONDARY_STYLES: {
-    readonly outline: {
-        readonly '': "0 #purple-text.0";
-        readonly focused: "1bw #purple-text";
-    };
-    readonly border: {
-        readonly '': "#purple.15";
-        readonly pressed: "#purple.3";
-        readonly focused: "#purple-text";
-    };
-    readonly fill: {
-        readonly '': "#purple.10";
-        readonly hovered: "#purple.16";
-        readonly pressed: "#purple-text.10";
-        readonly '[disabled]': "#dark.04";
-    };
-    readonly color: {
-        readonly '': "#purple";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const DEFAULT_OUTLINE_STYLES: {
-    readonly outline: {
-        readonly '': "0 #purple-text.0";
-        readonly focused: "1bw #purple-text";
-    };
-    readonly border: {
-        readonly '': "#dark.12";
-        readonly focused: "#purple-text";
-    };
-    readonly fill: {
-        readonly '': "#dark.0";
-        readonly hovered: "#dark.03";
-        readonly 'pressed | selected': "#dark.06";
-        readonly '[disabled]': "#dark.04";
-    };
-    readonly color: {
-        readonly '': "#dark-02";
-        readonly hovered: "#dark-02";
-        readonly pressed: "#dark";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const DEFAULT_NEUTRAL_STYLES: {
-    readonly outline: {
-        readonly '': "0 #purple-text.0";
-        readonly focused: "1bw #purple-text";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly focused: "#purple-text";
-    };
-    readonly fill: {
-        readonly '': "#dark.0";
-        readonly hovered: "#dark.03";
-        readonly 'pressed | selected': "#dark.06";
-        readonly '[disabled]': "#dark.04";
-    };
-    readonly color: {
-        readonly '': "#dark-02";
-        readonly hovered: "#dark-02";
-        readonly pressed: "#dark";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const DEFAULT_CLEAR_STYLES: {
-    readonly outline: {
-        readonly '': "0 #purple-text.0";
-        readonly focused: "1bw #purple-text";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly pressed: "#purple-text.10";
-        readonly focused: "#purple-text";
-    };
-    readonly fill: {
-        readonly '': "#purple.0";
-        readonly hovered: "#purple.16";
-        readonly pressed: "#purple.10";
-        readonly '[disabled]': "#purple.0";
-    };
-    readonly color: {
-        readonly '': "#purple-text";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const DEFAULT_LINK_STYLES: {
-    readonly outline: {
-        readonly '': "0 #purple-text.0";
-        readonly focused: "1bw #purple-text";
-    };
-    readonly border: {
-        readonly '': "0";
-        readonly focused: "#purple-text";
-    };
-    readonly fill: {
-        readonly '': "#clear";
-    };
-    readonly color: {
-        readonly '': "#purple-text";
-        readonly pressed: "#purple";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const DANGER_PRIMARY_STYLES: {
-    readonly outline: {
-        readonly '': "0 #danger-text.0";
-        readonly focused: "1bw #danger-text";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly pressed: "#danger-text";
-        readonly focused: "#danger-text";
-    };
-    readonly fill: {
-        readonly '': "#danger";
-        readonly hovered: "#danger-text";
-        readonly pressed: "#danger";
-        readonly '[disabled]': "#dark.04";
-    };
-    readonly color: {
-        readonly '': "#white";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const DANGER_SECONDARY_STYLES: {
-    readonly outline: {
-        readonly '': "0 #danger-text.0";
-        readonly focused: "1bw #danger-text";
-    };
-    readonly border: {
-        readonly '': "#danger.15";
-        readonly pressed: "#danger.3";
-        readonly focused: "#danger-text";
-    };
-    readonly fill: {
-        readonly '': "#danger.05";
-        readonly hovered: "#danger.1";
-        readonly pressed: "#danger.05";
-        readonly '[disabled]': "#dark.04";
-    };
-    readonly color: {
-        readonly '': "#white";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const DANGER_OUTLINE_STYLES: {
-    readonly outline: {
-        readonly '': "0 #danger-text.0";
-        readonly focused: "1bw #danger-text";
-    };
-    readonly border: {
-        readonly '': "#danger.15";
-        readonly pressed: "#danger.3";
-        readonly focused: "#danger-text";
-    };
-    readonly fill: {
-        readonly '': "#danger.0";
-        readonly hovered: "#danger.1";
-        readonly pressed: "#danger.05";
-        readonly '[disabled]': "#danger.0";
-    };
-    readonly color: {
-        readonly '': "#white";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const DANGER_NEUTRAL_STYLES: {
-    readonly outline: {
-        readonly '': "0 #danger-text.0";
-        readonly focused: "1bw #danger-text";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly focused: "#danger-text";
-    };
-    readonly fill: {
-        readonly '': "#dark.0";
-        readonly hovered: "#dark.04";
-        readonly pressed: "#dark.05";
-        readonly '[disabled]': "#dark.04";
-    };
-    readonly color: {
-        readonly '': "#white";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const DANGER_CLEAR_STYLES: {
-    readonly outline: {
-        readonly '': "0 #danger-text.0";
-        readonly focused: "1bw #danger-text";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly focused: "#danger-text";
-    };
-    readonly fill: {
-        readonly '': "#danger.0";
-        readonly hovered: "#danger.1";
-        readonly pressed: "#danger.05";
-        readonly '[disabled]': "#danger.0";
-    };
-    readonly color: {
-        readonly '': "#white";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const DANGER_LINK_STYLES: {
-    readonly outline: {
-        readonly '': "0 #danger-text.0";
-        readonly focused: "1bw #danger-text";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly focused: "#danger-text";
-    };
-    readonly fill: {
-        readonly '': "#clear";
-        readonly '[disabled]': "#dark.04";
-    };
-    readonly color: {
-        readonly '': "#white";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const SUCCESS_PRIMARY_STYLES: {
-    readonly outline: {
-        readonly '': "0 #success-text.0";
-        readonly focused: "1bw #success-text";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly pressed: "#success-text";
-        readonly focused: "#success-text";
-    };
-    readonly fill: {
-        readonly '': "#success";
-        readonly hovered: "#success-text";
-        readonly pressed: "#success";
-        readonly '[disabled]': "#dark.04";
-    };
-    readonly color: {
-        readonly '': "#white";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const SUCCESS_SECONDARY_STYLES: {
-    readonly outline: {
-        readonly '': "0 #success-text.0";
-        readonly focused: "1bw #success-text";
-    };
-    readonly border: {
-        readonly '': "#success.15";
-        readonly pressed: "#success.3";
-        readonly focused: "#success-text";
-    };
-    readonly fill: {
-        readonly '': "#success.05";
-        readonly hovered: "#success.1";
-        readonly pressed: "#success.05";
-        readonly '[disabled]': "#dark.04";
-    };
-    readonly color: {
-        readonly '': "#success";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const SUCCESS_OUTLINE_STYLES: {
-    readonly outline: {
-        readonly '': "0 #success-text.0";
-        readonly focused: "1bw #success-text";
-    };
-    readonly border: {
-        readonly '': "#success.15";
-        readonly pressed: "#success.3";
-        readonly focused: "#success-text";
-    };
-    readonly fill: {
-        readonly '': "#success.0";
-        readonly hovered: "#success.1";
-        readonly pressed: "#success.05";
-        readonly '[disabled]': "#success.0";
-    };
-    readonly color: {
-        readonly '': "#success-text";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const SUCCESS_NEUTRAL_STYLES: {
-    readonly outline: {
-        readonly '': "0 #success-text.0";
-        readonly focused: "1bw #success-text";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly focused: "#success-text";
-    };
-    readonly fill: {
-        readonly '': "#dark.0";
-        readonly hovered: "#dark.04";
-        readonly pressed: "#dark.05";
-        readonly '[disabled]': "#dark.04";
-    };
-    readonly color: {
-        readonly '': "#dark-02";
-        readonly hovered: "#dark-02";
-        readonly pressed: "#success";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const SUCCESS_CLEAR_STYLES: {
-    readonly outline: {
-        readonly '': "0 #success-text.0";
-        readonly focused: "1bw #success-text";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly focused: "#success-text";
-    };
-    readonly fill: {
-        readonly '': "#success.0";
-        readonly hovered: "#success.1";
-        readonly pressed: "#success.05";
-        readonly '[disabled]': "#success.0";
-    };
-    readonly color: {
-        readonly '': "#success-text";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const SUCCESS_LINK_STYLES: {
-    readonly outline: {
-        readonly '': "0 #success-text.0";
-        readonly focused: "1bw #success-text";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly focused: "#success-text";
-    };
-    readonly fill: {
-        readonly '': "#clear";
-        readonly '[disabled]': "#dark.04";
-    };
-    readonly color: {
-        readonly '': "#success-text";
-        readonly pressed: "#success";
-        readonly '[disabled]': "#dark.30";
-    };
-};
-export declare const SPECIAL_PRIMARY_STYLES: {
-    readonly outline: {
-        readonly '': "0 #white.0";
-        readonly focused: "1bw #white";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly pressed: "#purple-03";
-    };
-    readonly fill: {
-        readonly '': "#purple";
-        readonly pressed: "#purple";
-        readonly hovered: "#purple-text";
-        readonly '[disabled]': "#white.12";
-    };
-    readonly color: {
-        readonly '': "#white";
-        readonly '[disabled]': "#white.30";
-    };
-};
-export declare const SPECIAL_SECONDARY_STYLES: {
-    readonly outline: {
-        readonly '': "0 #white.0";
-        readonly focused: "1bw #white";
-    };
-    readonly border: {
-        readonly '': "#white.3";
-        readonly pressed: "#white.4";
-        readonly focused: "#white";
-    };
-    readonly fill: {
-        readonly '': "#white.12";
-        readonly hovered: "#white.18";
-        readonly pressed: "#white.12";
-        readonly '[disabled]': "#white.12";
-    };
-    readonly color: {
-        readonly '': "#white";
-        readonly '[disabled]': "#white.30";
-    };
-};
-export declare const SPECIAL_OUTLINE_STYLES: {
-    readonly outline: {
-        readonly '': "0 #white.0";
-        readonly focused: "1bw #white";
-    };
-    readonly border: {
-        readonly '': "#white.3";
-        readonly '!pressed': "#white.3";
-        readonly focused: "#white";
-        readonly '[disabled]': "#white.3";
-    };
-    readonly fill: {
-        readonly '': "#white.0";
-        readonly hovered: "#white.18";
-        readonly pressed: "#white.12";
-        readonly '[disabled]': "#white.0";
-    };
-    readonly color: {
-        readonly '': "#white";
-        readonly '[disabled]': "#white.30";
-    };
-};
-export declare const SPECIAL_NEUTRAL_STYLES: {
-    readonly outline: {
-        readonly '': "0 #white.0";
-        readonly focused: "1bw #white";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly '!pressed': 0;
-        readonly focused: "#white";
-        readonly '[disabled]': "#white.3";
-    };
-    readonly fill: {
-        readonly '': "#white.0";
-        readonly hovered: "#white.18";
-        readonly pressed: "#white.12";
-        readonly '[disabled]': "#white.12";
-    };
-    readonly color: {
-        readonly '': "#white";
-        readonly '[disabled]': "#white.30";
-    };
-};
-export declare const SPECIAL_CLEAR_STYLES: {
-    readonly outline: {
-        readonly '': "0 #white.0";
-        readonly focused: "1bw #white";
-    };
-    readonly border: {
-        readonly '': "#clear";
-        readonly focused: "#white";
-        readonly '[disabled]': "#white.3";
-    };
-    readonly fill: {
-        readonly '': "#white";
-        readonly hovered: "#white.94";
-        readonly pressed: "#white";
-        readonly '[disabled]': "#white.0";
-    };
-    readonly color: {
-        readonly '': "#purple";
-        readonly '[disabled]': "#white.30";
-    };
-};
-export declare const SPECIAL_LINK_STYLES: {
-    readonly outline: {
-        readonly '': "0 #white.0";
-        readonly focused: "1bw #white";
-    };
-    readonly border: {
-        readonly '': 0;
-        readonly focused: "#white";
-        readonly '[disabled]': "#white.3";
-    };
-    readonly fill: {
-        readonly '': "#clear";
-        readonly '[disabled]': "#white.12";
-    };
-    readonly color: {
-        readonly '': "#white";
-        readonly '[disabled]': "#white.30";
-    };
-};
+export declare const DEFAULT_PRIMARY_STYLES: Styles;
+export declare const DEFAULT_SECONDARY_STYLES: Styles;
+export declare const DEFAULT_OUTLINE_STYLES: Styles;
+export declare const DEFAULT_NEUTRAL_STYLES: Styles;
+export declare const DEFAULT_CLEAR_STYLES: Styles;
+export declare const DEFAULT_LINK_STYLES: Styles;
+export declare const DANGER_PRIMARY_STYLES: Styles;
+export declare const DANGER_SECONDARY_STYLES: Styles;
+export declare const DANGER_OUTLINE_STYLES: Styles;
+export declare const DANGER_NEUTRAL_STYLES: Styles;
+export declare const DANGER_CLEAR_STYLES: Styles;
+export declare const DANGER_LINK_STYLES: Styles;
+export declare const SUCCESS_PRIMARY_STYLES: Styles;
+export declare const SUCCESS_SECONDARY_STYLES: Styles;
+export declare const SUCCESS_OUTLINE_STYLES: Styles;
+export declare const SUCCESS_NEUTRAL_STYLES: Styles;
+export declare const SUCCESS_CLEAR_STYLES: Styles;
+export declare const SUCCESS_LINK_STYLES: Styles;
+export declare const SPECIAL_PRIMARY_STYLES: Styles;
+export declare const SPECIAL_SECONDARY_STYLES: Styles;
+export declare const SPECIAL_OUTLINE_STYLES: Styles;
+export declare const SPECIAL_NEUTRAL_STYLES: Styles;
+export declare const SPECIAL_CLEAR_STYLES: Styles;
+export declare const SPECIAL_LINK_STYLES: Styles;
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<CubeButtonProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;

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

@@ -4,7 +4,7 @@ import { AriaMenuProps } from 'react-aria';
 import { Section as BaseSection } from 'react-stately';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { MenuButtonProps, MenuSelectionType } from './MenuButton';
-export interface CubeMenuProps<T> extends ContainerStyleProps, AriaMenuProps<T> {
+export interface CubeMenuProps<T> extends BaseProps, ContainerStyleProps, AriaMenuProps<T> {
     selectionIcon?: MenuSelectionType;
     header?: ReactNode;
     footer?: ReactNode;