@clickhouse/click-ui 0.0.78 → 0.0.80

package/dist/components/BigStat/BigStat.d.ts

@@ -1,12 +1,15 @@
 /// <reference types="react" />
-export type bigStatState = "default";
+export type bigStatOrder = "titleTop" | "titleBottom";
 export type bigStatSize = "sm" | "lg";
-export type bigStatHeight = "fixed" | "fluid";
+export type bigStatSpacing = "sm" | "lg";
+export type bigStatState = "default" | "muted";
 export interface BigStatProps {
     label: React.ReactNode;
     title: React.ReactNode;
     height?: string;
-    state?: bigStatState;
+    order?: bigStatOrder;
     size?: bigStatSize;
+    spacing?: bigStatSpacing;
+    state?: bigStatState;
 }
-export declare const BigStat: ({ label, title, height, size, state, }: BigStatProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BigStat: ({ label, title, height, order, size, spacing, state, }: BigStatProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CardPromotion/CardPromotion.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from "react";
+import { IconName } from '../../components';
+export interface CardPromotionProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+    icon: IconName;
+    dismissible?: boolean;
+}
+export declare const CardPromotion: ({ label, icon, dismissible, ...props }: CardPromotionProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Select/common/InternalSelect.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { SelectContainerProps, SelectGroupProps, SelectItemProps } from "./types";
-export declare const InternalSelect: ({ label, children, orientation, dir, disabled, id, error, value: selectedValues, onChange, onSelect, open, onOpenChange, name, form, allowCreateOption, customText, options, showCheck, sortable, placeholder, multiple, showSearch, container, ...props }: SelectContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InternalSelect: ({ label, children, orientation, dir, disabled, id, error, value: selectedValues, onChange, onSelect, open, onOpenChange, name, form, allowCreateOption, customText, options, sortable, placeholder, multiple, showSearch, container, ...props }: SelectContainerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Select/common/types.d.ts

@@ -53,7 +53,6 @@ interface InternalSelectProps extends PopoverProps, Omit<HTMLAttributes<HTMLDivE
     dir?: "start" | "end";
     orientation?: "horizontal" | "vertical";
     allowCreateOption?: boolean;
-    showCheck?: boolean;
     onChange: (selectedValues: Array<string>) => void;
     open: boolean;
     onOpenChange: (open: boolean) => void;

package/dist/components/Toast/Toast.d.ts

@@ -11,6 +11,8 @@ export interface ToastProps {
     type?: ToastType;
     title: string;
     description?: ReactNode;
+    /** Time in milliseconds the toast will be visible */
+    duration?: number;
     actions?: Array<ButtonProps & {
         altText: string;
     }>;

package/dist/components/icons/Flags/GreatBritain.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-declare const GreatBritain: (props: React.SVGAttributes<SVGElement>) => React.ReactElement;
+/// <reference types="react" />
+declare const GreatBritain: (props: import("react").SVGAttributes<SVGElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default GreatBritain;

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export { Button } from "./Button/Button";
 export { CardSecondary } from "./CardSecondary/CardSecondary";
 export { CardPrimary } from "./CardPrimary/CardPrimary";
 export { CardHorizontal } from "./CardHorizontal/CardHorizontal";
+export { CardPromotion } from "./CardPromotion/CardPromotion";
 export { Checkbox } from "./Checkbox/Checkbox";
 export { CodeBlock } from "./CodeBlock/CodeBlock";
 export { Dialog } from "./Dialog/Dialog";

package/dist/components/types.d.ts

@@ -41,6 +41,7 @@ export type { BigStatProps } from "./BigStat/BigStat";
 export type { TextAreaFieldProps } from "./Input/TextArea";
 export type { VerticalStepperProps, VerticalStepProps, } from "./VerticalStepper/VerticalStepper";
 export type { CardHorizontalProps } from "./CardHorizontal/CardHorizontal";
+export type { CardPromotionProps } from "./CardPromotion/CardPromotion";
 export type { ProgressBarProps } from "./ProgressBar/ProgressBar";
 export type States = "default" | "active" | "disabled" | "error" | "hover";
 export type HorizontalDirection = "start" | "end";

package/dist/styles/types.d.ts

@@ -258,7 +258,12 @@ export interface Theme {
         "bigStat": {
             "space": {
                 "all": string;
-                "gap": string;
+                "sm": {
+                    "gap": string;
+                };
+                "lg": {
+                    "gap": string;
+                };
             };
             "radii": {
                 "all": string;
@@ -268,32 +273,40 @@ export interface Theme {
                 "lg": {
                     "label": {
                         "default": string;
+                        "muted": string;
                     };
                     "title": {
                         "default": string;
+                        "muted": string;
                     };
                 };
                 "sm": {
                     "label": {
                         "default": string;
+                        "muted": string;
                     };
                     "title": {
                         "default": string;
+                        "muted": string;
                     };
                 };
             };
             "color": {
                 "stroke": {
                     "default": string;
+                    "muted": string;
                 };
                 "background": {
                     "default": string;
+                    "muted": string;
                 };
                 "label": {
                     "default": string;
+                    "muted": string;
                 };
                 "title": {
                     "default": string;
+                    "muted": string;
                 };
             };
         };
@@ -895,6 +908,49 @@ export interface Theme {
                     };
                 };
             };
+            "promotion": {
+                "radii": {
+                    "all": string;
+                };
+                "typography": {
+                    "text": {
+                        "default": string;
+                    };
+                };
+                "space": {
+                    "y": string;
+                    "x": string;
+                    "gap": string;
+                };
+                "icon": {
+                    "size": {
+                        "all": string;
+                    };
+                };
+                "color": {
+                    "text": {
+                        "default": string;
+                        "hover": string;
+                        "active": string;
+                    };
+                    "icon": {
+                        "default": string;
+                        "hover": string;
+                        "active": string;
+                    };
+                    "background": {
+                        "default": string;
+                        "hover": string;
+                        "active": string;
+                    };
+                    "stroke": {
+                        "default": string;
+                        "hover": string;
+                        "active": string;
+                        "focus": string;
+                    };
+                };
+            };
         };
         "checkbox": {
             "radii": {
@@ -1192,6 +1248,22 @@ export interface Theme {
                     "sectionHeader": {
                         "default": string;
                     };
+                    "subtext": {
+                        "default": string;
+                        "hover": string;
+                        "active": string;
+                        "disabled": string;
+                    };
+                };
+                "two-lines": {
+                    "space": {
+                        "x": string;
+                        "y": string;
+                        "gap": string;
+                    };
+                };
+                "size": {
+                    "minWidth": string;
                 };
                 "color": {
                     "text": {
@@ -1217,6 +1289,12 @@ export interface Theme {
                     "stroke": {
                         "default": string;
                     };
+                    "subtext": {
+                        "default": string;
+                        "hover": string;
+                        "active": string;
+                        "disabled": string;
+                    };
                 };
             };
             "itemCustom": {
@@ -2424,6 +2502,9 @@ export interface Theme {
                 "shadow": {
                     "default": string;
                 };
+                "title": {
+                    "default": string;
+                };
             };
         };
         "feedback": {

package/dist/styles/variables.classic.json.d.ts

@@ -302,9 +302,9 @@ declare const _default: {
             "disabled": "#dfdfdf"
           },
           "title": {
-            "default": "#161517",
-            "hover": "#161517",
-            "active": "#161517",
+            "default": "lch(10.2 1.39 305)",
+            "hover": "lch(10.2 1.39 305)",
+            "active": "lch(10.2 1.39 305)",
             "disabled": "#a0a0a0"
           },
           "description": {
@@ -331,9 +331,9 @@ declare const _default: {
               "disabled": "#dfdfdf"
             },
             "title": {
-              "default": "#161517",
-              "hover": "#161517",
-              "active": "#161517",
+              "default": "lch(10.2 1.39 305)",
+              "hover": "lch(10.2 1.39 305)",
+              "active": "lch(10.2 1.39 305)",
               "disabled": "#a0a0a0"
             },
             "description": {
@@ -359,9 +359,9 @@ declare const _default: {
               "disabled": "#dfdfdf"
             },
             "title": {
-              "default": "#161517",
-              "hover": "#161517",
-              "active": "#161517",
+              "default": "lch(10.2 1.39 305)",
+              "hover": "lch(10.2 1.39 305)",
+              "active": "lch(10.2 1.39 305)",
               "disabled": "#a0a0a0"
             },
             "description": {
@@ -378,6 +378,31 @@ declare const _default: {
             }
           }
         }
+      },
+      "promotion": {
+        "color": {
+          "text": {
+            "default": "#161517",
+            "hover": "#161517",
+            "active": "#161517"
+          },
+          "icon": {
+            "default": "#161517",
+            "hover": "#161517",
+            "active": "#161517"
+          },
+          "background": {
+            "default": "lch(97.2 1.57 272 / 0.9)",
+            "hover": "lch(91.8 1.07 266)",
+            "active": "lch(89.3 1.07 266)"
+          },
+          "stroke": {
+            "default": "linear-gradient(174deg, #ABABAB 7.59%, #D4D4D4 30.01%)",
+            "hover": "linear-gradient(174deg, #ABABAB 7.59%, #D4D4D4 30.01%)",
+            "active": "linear-gradient(174deg, #ABABAB 7.59%, #D4D4D4 30.01%)",
+            "focus": "#151515"
+          }
+        }
       }
     },
     "sidebar": {
@@ -650,7 +675,7 @@ declare const _default: {
           "default": "#ffffff"
         },
         "title": {
-          "default": "#161517"
+          "default": "lch(10.2 1.39 305)"
         },
         "description": {
           "default": "#696e79"
@@ -724,6 +749,9 @@ declare const _default: {
             "default": "#C78F0F",
             "hover": "#C78F0F"
           }
+        },
+        "title": {
+          "default": "lch(10.2 1.39 305)"
         }
       }
     },

package/dist/styles/variables.dark.json.d.ts

@@ -98,16 +98,20 @@ declare const _default: {
     "bigStat": {
       "color": {
         "stroke": {
-          "default": "lch(27.5 0 0 / 0.3)"
+          "default": "lch(27.5 0 0 / 0.3)",
+          "muted": "lch(27.5 0 0 / 0.3)"
         },
         "background": {
-          "default": "#1F1F1C"
+          "default": "#1F1F1C",
+          "muted": "#282828"
         },
         "label": {
-          "default": "#b3b6bd"
+          "default": "#b3b6bd",
+          "muted": "#b3b6bd"
         },
         "title": {
-          "default": "#ffffff"
+          "default": "lch(97.5 0 0)",
+          "muted": "lch(97.5 0 0)"
         }
       }
     },
@@ -395,9 +399,9 @@ declare const _default: {
             "disabled": "#414141"
           },
           "title": {
-            "default": "#ffffff",
-            "hover": "#ffffff",
-            "active": "#ffffff",
+            "default": "lch(97.5 0 0)",
+            "hover": "lch(97.5 0 0)",
+            "active": "lch(97.5 0 0)",
             "disabled": "#808080"
           },
           "description": {
@@ -429,9 +433,9 @@ declare const _default: {
             "disabled": "#414141"
           },
           "title": {
-            "default": "#ffffff",
-            "hover": "#ffffff",
-            "active": "#ffffff",
+            "default": "lch(97.5 0 0)",
+            "hover": "lch(97.5 0 0)",
+            "active": "lch(97.5 0 0)",
             "disabled": "#808080"
           },
           "description": {
@@ -458,9 +462,9 @@ declare const _default: {
               "disabled": "#414141"
             },
             "title": {
-              "default": "#ffffff",
-              "hover": "#ffffff",
-              "active": "#ffffff",
+              "default": "lch(97.5 0 0)",
+              "hover": "lch(97.5 0 0)",
+              "active": "lch(97.5 0 0)",
               "disabled": "#808080"
             },
             "description": {
@@ -486,9 +490,9 @@ declare const _default: {
               "disabled": "#414141"
             },
             "title": {
-              "default": "#ffffff",
-              "hover": "#ffffff",
-              "active": "#ffffff",
+              "default": "lch(97.5 0 0)",
+              "hover": "lch(97.5 0 0)",
+              "active": "lch(97.5 0 0)",
               "disabled": "#808080"
             },
             "description": {
@@ -505,6 +509,31 @@ declare const _default: {
             }
           }
         }
+      },
+      "promotion": {
+        "color": {
+          "text": {
+            "default": "#ffffff",
+            "hover": "#ffffff",
+            "active": "#ffffff"
+          },
+          "icon": {
+            "default": "#FAFF69",
+            "hover": "#FAFF69",
+            "active": "#FAFF69"
+          },
+          "background": {
+            "default": "lch(16.1 0 0 / 0.9)",
+            "hover": "lch(18.2 0 0 / 0.9)",
+            "active": "lch(20.2 0 0 / 0.9)"
+          },
+          "stroke": {
+            "default": "linear-gradient(174deg, #FAFF69 8.31%, #2C2E31 22.92%)",
+            "hover": "linear-gradient(174deg, #FAFF69 8.31%, #2C2E31 22.92%)",
+            "active": "linear-gradient(174deg, #FAFF69 8.31%, #2C2E31 22.92%)",
+            "focus": "#FAFF69"
+          }
+        }
       }
     },
     "checkbox": {
@@ -658,7 +687,7 @@ declare const _default: {
           "background": {
             "default": "#282828",
             "hover": "lch(23.5 0 0)",
-            "active": "lch(23.5 0 0)",
+            "active": "#282828",
             "disabled": "#414141"
           },
           "format": {
@@ -670,6 +699,12 @@ declare const _default: {
           },
           "stroke": {
             "default": "lch(27.5 0 0 / 0.3)"
+          },
+          "subtext": {
+            "default": "#b3b6bd",
+            "hover": "#b3b6bd",
+            "active": "#b3b6bd",
+            "disabled": "#c0c0c0"
           }
         }
       },
@@ -999,7 +1034,7 @@ declare const _default: {
             "active": "lch(18.2 0 0)"
           },
           "title": {
-            "default": "#ffffff"
+            "default": "lch(97.5 0 0)"
           },
           "icon": {
             "default": "#ffffff"
@@ -1092,7 +1127,7 @@ declare const _default: {
     "toast": {
       "color": {
         "title": {
-          "default": "#ffffff"
+          "default": "lch(97.5 0 0)"
         },
         "description": {
           "default": "#b3b6bd"
@@ -1101,7 +1136,7 @@ declare const _default: {
           "default": "#414141"
         },
         "icon": {
-          "default": "#ffffff",
+          "default": "lch(97.5 0 0)",
           "success": "#81e59d",
           "warning": "#ff9416",
           "danger": "#ff7575"
@@ -1124,7 +1159,7 @@ declare const _default: {
           "default": "#1F1F1C"
         },
         "title": {
-          "default": "#ffffff"
+          "default": "lch(97.5 0 0)"
         },
         "description": {
           "default": "#b3b6bd"
@@ -1140,7 +1175,7 @@ declare const _default: {
           "default": "#1F1F1C"
         },
         "title": {
-          "default": "#ffffff"
+          "default": "lch(97.5 0 0)"
         },
         "description": {
           "default": "#b3b6bd"
@@ -1234,6 +1269,9 @@ declare const _default: {
         },
         "shadow": {
           "default": "lch(6.77 0 0 / 0.6)"
+        },
+        "title": {
+          "default": "lch(97.5 0 0)"
         }
       }
     },