@cube-dev/ui-kit 0.59.13 → 0.60.0

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

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
-import { Styles } from '../../../tasty';
 import { CubeActionProps } from '../Action/Action';
 export interface CubeButtonProps extends CubeActionProps {
     icon?: ReactElement;
@@ -9,5 +8,101 @@ export interface CubeButtonProps extends CubeActionProps {
     type?: 'primary' | 'secondary' | 'danger' | 'link' | 'clear' | 'outline' | 'neutral' | (string & {});
     size?: 'small' | 'medium' | 'large' | (string & {});
 }
-export declare const DEFAULT_BUTTON_STYLES: Styles;
+export declare const DEFAULT_BUTTON_STYLES: {
+    readonly display: "inline-grid";
+    readonly placeItems: "center stretch";
+    readonly placeContent: "center";
+    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";
+        readonly '[data-size="small"]': ".5x";
+    };
+    readonly flow: "column";
+    readonly preset: {
+        readonly '': "t3m";
+        readonly '[data-size="large"]': "t2m";
+    };
+    readonly textDecoration: "none";
+    readonly transition: "theme";
+    readonly reset: "button";
+    readonly outlineOffset: 1;
+    readonly padding: {
+        readonly '': "0 (2x - 1bw)";
+        readonly '[data-size="small"]': "0 (1x - 1bw)";
+        readonly '[data-size="medium"]': "0 (1.5x - 1bw)";
+        readonly '[data-size="large"]': "0 (2.25x - 1bw)";
+        readonly 'single-icon-only | [data-type="link"]': 0;
+    };
+    readonly width: {
+        readonly '': "initial";
+        readonly '[data-size="small"] & single-icon-only': "4x 4x";
+        readonly '[data-size="medium"] & single-icon-only': "5x 5x";
+        readonly '[data-size="large"] & single-icon-only': "6x 6x";
+    };
+    readonly height: {
+        readonly '': "initial";
+        readonly '[data-size="small"]': "4x 4x";
+        readonly '[data-size="medium"]': "5x 5x";
+        readonly '[data-size="large"]': "6x 6x";
+        readonly '[data-type="link"]': "auto";
+    };
+    readonly whiteSpace: "nowrap";
+    readonly radius: {
+        readonly '': true;
+        readonly '[data-type="link"] & !focused': 0;
+    };
+};
+export declare const DEFAULT_THEME_STYLES: {
+    readonly outline: {
+        readonly '': "0 #purple-text.0";
+        readonly 'focused & ([data-type="primary"] | [data-type="link"])': "1bw #purple-text";
+    };
+    readonly border: {
+        readonly '': "#border";
+        readonly '[data-type="primary"]': "#clear";
+        readonly '[data-type="primary"] & pressed': "#purple-text";
+        readonly '[data-type="secondary"]': "#purple.15";
+        readonly '[data-type="secondary"] & pressed': "#purple.3";
+        readonly '[data-type="clear"]': "#clear";
+        readonly '[data-type="clear"] & pressed': "#purple-text.10";
+        readonly '[data-type="outline"]': "#dark.12";
+        readonly '[data-type="neutral"] | [disabled]': "#clear";
+        readonly focused: "#purple-text";
+        readonly '[data-type="link"]': "0";
+    };
+    readonly fill: {
+        readonly '': "#clear";
+        readonly '[data-type="primary"]': "#purple";
+        readonly '[data-type="primary"] & hovered': "#purple-text";
+        readonly '[data-type="primary"] & pressed': "#purple";
+        readonly '[data-type="secondary"]': "#purple.10";
+        readonly '[data-type="secondary"] & hovered': "#purple.16";
+        readonly '[data-type="secondary"] & pressed': "#purple-text.10";
+        readonly '[data-type="neutral"] | [data-type="outline"]': "#dark.0";
+        readonly '([data-type="neutral"] | [data-type="outline"]) & hovered': "#dark.03";
+        readonly '([data-type="neutral"] | [data-type="outline"]) & (pressed | selected)': "#dark.06";
+        readonly '[disabled] & ![data-type="link"]': "#dark.04";
+        readonly '[data-type="clear"]': "#purple.0";
+        readonly '[data-type="clear"] & hovered': "#purple.16";
+        readonly '[data-type="clear"] & pressed': "#purple.10";
+        readonly '[data-type="clear"] & [disabled]': "#purple.0";
+    };
+    readonly color: {
+        readonly '': "#white";
+        readonly '[data-type="secondary"]': "#purple";
+        readonly '[data-type="clear"] | [data-type="link"]': "#purple-text";
+        readonly '[data-type="link"] & pressed': "#purple";
+        readonly '[data-type="neutral"] | [data-type="outline"]': "#dark-02";
+        readonly '([data-type="neutral"] | [data-type="outline"]) & hovered': "#dark-02";
+        readonly '([data-type="neutral"] | [data-type="outline"]) & pressed': "#dark";
+        readonly '[disabled]': "#dark.30";
+    };
+};
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<CubeButtonProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;