@clickhouse/click-ui 0.0.168 → 0.0.169

package/dist/click-ui.es.js

@@ -8992,7 +8992,7 @@ const Item = forwardRef(({
       /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir, children: label ?? children }),
       /* @__PURE__ */ jsx(CheckIcon$2, { as: SvgImage, name: "check", size: "sm", $showCheck: isChecked })
     ] }),
-    separator && /* @__PURE__ */ jsx(Separator$1, { size: "sm" })
+    separator && /* @__PURE__ */ jsx(Separator, { size: "sm" })
   ] });
 });
 Item.displayName = "AutoComplete.Item";
@@ -10092,6 +10092,7 @@ const Wrapper$5 = styled(FormRoot).withConfig({
 const Checkbox = ({
   id,
   label,
+  variant,
   disabled,
   orientation,
   dir,
@@ -10099,28 +10100,29 @@ const Checkbox = ({
 }) => {
   const defaultId = useId();
   return /* @__PURE__ */ jsxs(Wrapper$5, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
-    /* @__PURE__ */ jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsx(SvgImage, { name: "check", size: "sm" }) }) }),
+    /* @__PURE__ */ jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant: variant ?? "default", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsx(SvgImage, { name: "check", size: "sm" }) }) }),
     label && /* @__PURE__ */ jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 };
 const CheckInput = styled($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig({
   componentId: "sc-1sck1ja-1"
 })(["display:flex;align-items:center;justify-content:center;", ";"], ({
-  theme: theme2
+  theme: theme2,
+  variant = "default"
 }) => `
     border-radius: ${theme2.click.checkbox.radii.all};
     width: ${theme2.click.checkbox.size.all};
     height: ${theme2.click.checkbox.size.all};
-    background: ${theme2.click.checkbox.color.background.default};
-    border: 1px solid ${theme2.click.checkbox.color.stroke.default};
+    background: ${theme2.click.checkbox.color.variations[variant].background.default};
+    border: 1px solid ${theme2.click.checkbox.color.variations[variant].stroke.default};
     cursor: pointer;
 
     &:hover {
-      background: ${theme2.click.checkbox.color.background.hover};
+      background: ${theme2.click.checkbox.color.variations[variant].background.hover};
     }
     &[data-state="checked"] {
-      border-color: ${theme2.click.checkbox.color.stroke.active};
-      background: ${theme2.click.checkbox.color.background.active};
+      border-color: ${theme2.click.checkbox.color.variations[variant].stroke.active};
+      background: ${theme2.click.checkbox.color.variations[variant].background.active};
     }
     &[data-disabled] {
       background: ${theme2.click.checkbox.color.background.disabled};
@@ -14064,7 +14066,7 @@ const ConfirmationDialog = ({
     !open22 && onCancel && onCancel();
   }, children: /* @__PURE__ */ jsxs(DialogContent, { as: Dialog.Content, title, showClose, ...props, children: [
     /* @__PURE__ */ jsx(Container, { overflow: "auto", grow: "1", orientation: "vertical", children: children ? children : /* @__PURE__ */ jsx(Text, { children: message }) }),
-    /* @__PURE__ */ jsx(Separator$1, { size: "xl" }),
+    /* @__PURE__ */ jsx(Separator, { size: "xl" }),
     /* @__PURE__ */ jsxs(ActionsWrapper, { children: [
       /* @__PURE__ */ jsx(Dialog.Close, { label: secondaryActionLabel, "data-testid": "cancel-action-button" }),
       /* @__PURE__ */ jsx(Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, onClick: () => {
@@ -14225,7 +14227,7 @@ const Header$1 = ({
         /* @__PURE__ */ jsx(Container, { padding: "none", gap: "none", orientation: "vertical", grow: "1", children }),
         showClose && /* @__PURE__ */ jsx($5d3850c4d0b4e6c7$export$fba2fb7cd781b7ac, { asChild: true, children: /* @__PURE__ */ jsx(CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
       ] }),
-      showSeparator && /* @__PURE__ */ jsx(Separator$1, { "data-testid": "flyout-header-separator", size: "lg" })
+      showSeparator && /* @__PURE__ */ jsx(Separator, { "data-testid": "flyout-header-separator", size: "lg" })
     ] });
   }
   return /* @__PURE__ */ jsxs(FlyoutContainer, { children: [
@@ -14236,7 +14238,7 @@ const Header$1 = ({
       ] }),
       showClose && /* @__PURE__ */ jsx($5d3850c4d0b4e6c7$export$fba2fb7cd781b7ac, { asChild: true, children: /* @__PURE__ */ jsx(CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
     ] }),
-    showSeparator && /* @__PURE__ */ jsx(Separator$1, { "data-testid": "flyout-header-separator", size: "lg" })
+    showSeparator && /* @__PURE__ */ jsx(Separator, { "data-testid": "flyout-header-separator", size: "lg" })
   ] });
 };
 Header$1.displayName = "Flyout.Header";
@@ -14275,7 +14277,7 @@ const FooterContainer = styled(Container).withConfig({
 })(["width:var(--flyout-width);max-width:100%;"]);
 const Footer = (props) => {
   return /* @__PURE__ */ jsxs(FooterContainer, { gap: "none", orientation: "vertical", alignItems: "end", children: [
-    /* @__PURE__ */ jsx(Separator$1, { size: "xs" }),
+    /* @__PURE__ */ jsx(Separator, { size: "xs" }),
     /* @__PURE__ */ jsx(FlyoutFooter, { justifyContent: "end", gap: "none", padding: "none", isResponsive: false, wrap: "wrap", ...props })
   ] });
 };
@@ -36388,7 +36390,7 @@ const SelectItem = forwardRef(({
       /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir, children: label ?? children }),
       /* @__PURE__ */ jsx(CheckIcon$1, { as: SvgImage, name: "check", size: "sm", $showCheck: isChecked })
     ] }),
-    separator && /* @__PURE__ */ jsx(Separator$1, { size: "sm" })
+    separator && /* @__PURE__ */ jsx(Separator, { size: "sm" })
   ] });
 });
 SelectItem.displayName = "Select.Item";
@@ -36452,7 +36454,7 @@ const MultiSelectCheckboxItem = forwardRef(({
       icon && iconDir === "end" && /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange }) }),
       !icon && /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange })
     ] }),
-    separator && /* @__PURE__ */ jsx(Separator$1, { size: "sm" })
+    separator && /* @__PURE__ */ jsx(Separator, { size: "sm" })
   ] });
 });
 MultiSelectCheckboxItem.displayName = "Select.Item";
@@ -36656,7 +36658,6 @@ const Separator = ({
   orientation = "horizontal",
   ...props
 }) => /* @__PURE__ */ jsx(CUISeparator, { orientation, ...props });
-const Separator$1 = Separator;
 const LabelContainer = styled.span.withConfig({
   componentId: "sc-1cu1l45-0"
 })(["display:flex;align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;flex:1;gap:", ";overflow:hidden;"], ({
@@ -41786,6 +41787,154 @@ const click$2 = {
   },
   checkbox: {
     color: {
+      variations: {
+        "default": {
+          background: {
+            "default": "rgb(17.8% 17.8% 17.8%)",
+            hover: "rgb(17.8% 17.8% 17.8%)",
+            active: "#FAFF69",
+            disabled: "#414141"
+          },
+          stroke: {
+            "default": "#414141",
+            hover: "#414141",
+            active: "#FAFF69",
+            disabled: "#606060"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#151515",
+            disabled: "#808080"
+          },
+          label: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#606060"
+          }
+        },
+        var1: {
+          background: {
+            "default": "rgb(17.8% 17.8% 17.8%)",
+            hover: "rgb(17.8% 17.8% 17.8%)",
+            active: "#66FF73",
+            disabled: "rgb(17.8% 17.8% 17.8%)"
+          },
+          stroke: {
+            "default": "#00CC11",
+            hover: "#66FF73",
+            active: "#66FF73",
+            disabled: "#606060"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var2: {
+          background: {
+            "default": "rgb(17.8% 17.8% 17.8%)",
+            hover: "rgb(17.8% 17.8% 17.8%)",
+            active: "#6c9af3",
+            disabled: "rgb(17.8% 17.8% 17.8%)"
+          },
+          stroke: {
+            "default": "#6c9af3",
+            hover: "#91b3f6",
+            active: "#91b3f6",
+            disabled: "#606060"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var3: {
+          background: {
+            "default": "rgb(17.8% 17.8% 17.8%)",
+            hover: "rgb(17.8% 17.8% 17.8%)",
+            active: "#FB64D6",
+            disabled: "rgb(17.8% 17.8% 17.8%)"
+          },
+          stroke: {
+            "default": "#FB64D6",
+            hover: "#FB64D6",
+            active: "#FB64D6",
+            disabled: "#606060"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var4: {
+          background: {
+            "default": "rgb(17.8% 17.8% 17.8%)",
+            hover: "rgb(17.8% 17.8% 17.8%)",
+            active: "#FAFF69",
+            disabled: "rgb(17.8% 17.8% 17.8%)"
+          },
+          stroke: {
+            "default": "#FAFF69",
+            hover: "#fdffa3",
+            active: "#fdffa3",
+            disabled: "#606060"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var5: {
+          background: {
+            "default": "rgb(17.8% 17.8% 17.8%)",
+            hover: "rgb(17.8% 17.8% 17.8%)",
+            active: "#66FFE5",
+            disabled: "rgb(17.8% 17.8% 17.8%)"
+          },
+          stroke: {
+            "default": "#66FFE5",
+            hover: "#99FFEE",
+            active: "#99FFEE",
+            disabled: "#606060"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var6: {
+          background: {
+            "default": "rgb(17.8% 17.8% 17.8%)",
+            hover: "rgb(17.8% 17.8% 17.8%)",
+            active: "#BB33FF",
+            disabled: "rgb(17.8% 17.8% 17.8%)"
+          },
+          stroke: {
+            "default": "#CC66FF",
+            hover: "#CC66FF",
+            active: "#CC66FF",
+            disabled: "#606060"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        }
+      },
       background: {
         "default": "rgb(17.8% 17.8% 17.8%)",
         hover: "rgb(17.8% 17.8% 17.8%)",
@@ -42691,7 +42840,7 @@ const global$3 = {
       }
     },
     icon: {
-      background: "linear-gradient(132deg, #FAFF69 7.59%, #292929 30.01%);"
+      background: "linear-gradient(132deg, #FAFF69 8%, #292929 30%);"
     }
   }
 };
@@ -43291,6 +43440,148 @@ const click$1 = {
   },
   checkbox: {
     color: {
+      variations: {
+        "default": {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#161517",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#b3b6bd",
+            hover: "#b3b6bd",
+            active: "#161517",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var1: {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#62de85",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#62de85",
+            hover: "#66FF73",
+            active: "#66FF73",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var2: {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#6c9af3",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#6c9af3",
+            hover: "#6c9af3",
+            active: "#6c9af3",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var3: {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#FB64D6",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#FB64D6",
+            hover: "#FB64D6",
+            active: "#FB64D6",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var4: {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#ffb864",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#ffb864",
+            hover: "#ffb864",
+            active: "#ffb864",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var5: {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#00CCAA",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#00CCAA",
+            hover: "#00CCAA",
+            active: "#00CCAA",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var6: {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#CC66FF",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#CC66FF",
+            hover: "#BB33FF",
+            active: "#BB33FF",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        }
+      },
       background: {
         "default": "#f6f7fa",
         hover: "#f6f7fa",
@@ -44107,7 +44398,7 @@ const click$1 = {
   chart: {
     bars: {
       color: {
-        green: "#00FF15",
+        green: "#62de85",
         blue: "#6c9af3",
         fuchsia: "#FB64D6",
         orange: "#ffb864",
@@ -44175,7 +44466,7 @@ const global$2 = {
     },
     chart: {
       bars: {
-        green: "#00FF15",
+        green: "#62de85",
         blue: "#6c9af3",
         fuchsia: "#FB64D6",
         orange: "#ffb864",
@@ -44190,7 +44481,7 @@ const global$2 = {
       }
     },
     icon: {
-      background: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);"
+      background: "linear-gradient(132deg, #FFFFFF 8%, #292929 30%);"
     }
   }
 };
@@ -45263,6 +45554,154 @@ const click = {
       }
     },
     color: {
+      variations: {
+        "default": {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#161517",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#b3b6bd",
+            hover: "#b3b6bd",
+            active: "#161517",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          },
+          label: {
+            "default": "#161517",
+            hover: "#161517",
+            active: "#161517",
+            disabled: "#a0a0a0"
+          }
+        },
+        var1: {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#62de85",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#62de85",
+            hover: "#66FF73",
+            active: "#66FF73",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var2: {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#6c9af3",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#6c9af3",
+            hover: "#6c9af3",
+            active: "#6c9af3",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var3: {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#FB64D6",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#FB64D6",
+            hover: "#FB64D6",
+            active: "#FB64D6",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var4: {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#ffb864",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#ffb864",
+            hover: "#ffb864",
+            active: "#ffb864",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var5: {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#00CCAA",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#00CCAA",
+            hover: "#00CCAA",
+            active: "#00CCAA",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        },
+        var6: {
+          background: {
+            "default": "#f6f7fa",
+            hover: "#f6f7fa",
+            active: "#CC66FF",
+            disabled: "#dfdfdf"
+          },
+          stroke: {
+            "default": "#CC66FF",
+            hover: "#BB33FF",
+            active: "#BB33FF",
+            disabled: "#c0c0c0"
+          },
+          check: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#ffffff",
+            disabled: "#a0a0a0"
+          }
+        }
+      },
       background: {
         "default": "#f6f7fa",
         hover: "#f6f7fa",
@@ -46974,7 +47413,7 @@ const click = {
   chart: {
     bars: {
       color: {
-        green: "#00FF15",
+        green: "#62de85",
         blue: "#6c9af3",
         fuchsia: "#FB64D6",
         orange: "#ffb864",
@@ -47080,7 +47519,7 @@ const global$1 = {
     },
     chart: {
       bars: {
-        green: "#00FF15",
+        green: "#62de85",
         blue: "#6c9af3",
         fuchsia: "#FB64D6",
         orange: "#ffb864",
@@ -47095,7 +47534,11 @@ const global$1 = {
       }
     },
     icon: {
-      background: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);"
+      background: "linear-gradient(132deg, #FFFFFF 8%, #292929 30%);"
+    },
+    gradients: {
+      yellowToBlack: "linear-gradient(132deg, #faff69 8%, #292929 30%)",
+      whiteToBlack: "linear-gradient(132deg, #ffffff 8%, #292929 30%)"
     }
   }
 };
@@ -47213,8 +47656,8 @@ const palette = {
   },
   gradients: {
     base: "linear-gradient(229.65deg, #292924 15.78%, #0F0F0F 88.39%)",
-    yellowToblack: "linear-gradient(132deg, #FAFF69 7.59%, #292929 30.01%);",
-    whiteToblack: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);",
+    yellowToblack: "linear-gradient(132deg, #FAFF69 8%, #292929 30%);",
+    whiteToblack: "linear-gradient(132deg, #FFFFFF 8%, #292929 30%);",
     transparent: "rgba(0,0,0,0)"
   },
   utility: {
@@ -47809,7 +48252,7 @@ export {
   RadioGroup,
   SearchField,
   Select,
-  Separator$1 as Separator,
+  Separator,
   SidebarCollapsibleItem,
   SidebarCollapsibleTitle,
   SidebarNavigationItem,