@clickhouse/click-ui 0.0.231 → 0.0.233

package/dist/click-ui.es.js

@@ -9377,9 +9377,10 @@ const BigStat = ({
   spacing = "sm",
   state = "default",
   title = "Title",
+  error: error2 = false,
   ...props
-}) => /* @__PURE__ */ jsxs(Wrapper$a, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, ...props, children: [
-  /* @__PURE__ */ jsx(Label, { $state: state, $size: size2, children: label }),
+}) => /* @__PURE__ */ jsxs(Wrapper$a, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, $error: error2, ...props, children: [
+  /* @__PURE__ */ jsx(Label, { $state: state, $size: size2, $error: error2, children: label }),
   /* @__PURE__ */ jsx(Title$3, { $state: state, $size: size2, children: title })
 ] });
 const Wrapper$a = styled.div.withConfig({
@@ -9392,13 +9393,14 @@ const Wrapper$a = styled.div.withConfig({
   $height = "fixed",
   $order,
   $spacing = "sm",
+  $error = false,
   theme: theme2
 }) => `
     background-color: ${theme2.click.bigStat.color.background[$state]};
     color: ${theme2.click.bigStat.color.label[$state]};
     font: ${theme2.click.bigStat.typography[$size].label[$state]};
     border-radius: ${theme2.click.bigStat.radii.all};
-    border: ${theme2.click.bigStat.stroke} solid ${theme2.click.bigStat.color.stroke[$state]};
+    border: ${theme2.click.bigStat.stroke} solid ${$error ? theme2.click.bigStat.color.stroke.danger : theme2.click.bigStat.color.stroke[$state]};
   gap: ${theme2.click.bigStat.space[$spacing].gap};
   padding: ${theme2.click.bigStat.space.all};
   min-height: ${$height !== void 0 ? `${$height}` : "auto"};
@@ -9411,9 +9413,10 @@ const Label = styled.div.withConfig({
 })(["", ""], ({
   $state = "default",
   $size = "lg",
+  $error = false,
   theme: theme2
 }) => `
-    color: ${theme2.click.bigStat.color.label[$state]};
+    color: ${$error ? theme2.click.bigStat.color.label.danger : theme2.click.bigStat.color.label[$state]};
     font: ${theme2.click.bigStat.typography[$size].label[$state]};
   `);
 const Title$3 = styled.div.withConfig({
@@ -35220,7 +35223,11 @@ const SelectList = styled.div.withConfig({
 })(["display:flex;flex-direction:column;width:inherit;max-height:calc(var(--radix-popover-content-available-height) - 1rem);"]);
 const SelectListContent = styled.div.withConfig({
   componentId: "sc-oudbwg-8"
-})(["width:inherit;overflow:auto;flex:1;"]);
+})(["width:inherit;overflow:auto;flex:1;", ""], ({
+  $maxHeight
+}) => $maxHeight && `
+      max-height: ${$maxHeight};
+    `);
 const HiddenSelectElement = styled.select.withConfig({
   componentId: "sc-oudbwg-9"
 })(["visibility:hidden;position:absolute;z-index:-1;height:0;"]);
@@ -38658,6 +38665,7 @@ const InternalSelect = ({
   options,
   sortable = false,
   placeholder = "Select an option",
+  maxHeight,
   multiple,
   checkbox,
   selectLabel,
@@ -38846,7 +38854,7 @@ const InternalSelect = ({
             /* @__PURE__ */ jsx(SearchBar, { ref: inputRef, value: search, onChange: (e) => onUpdateSearch(e.target.value), "data-testid": "select-search-input", onKeyDown, $showSearch: showSearch }),
             /* @__PURE__ */ jsx(SearchClose, { as: IconButton$1, icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", $showClose: search.length > 0, size: "xs" })
           ] }),
-          /* @__PURE__ */ jsx(SelectListContent, { children: /* @__PURE__ */ jsx(OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((props2, index2) => {
+          /* @__PURE__ */ jsx(SelectListContent, { $maxHeight: maxHeight, children: /* @__PURE__ */ jsx(OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((props2, index2) => {
             if ("options" in props2) {
               const {
                 options: itemList = [],
@@ -40221,7 +40229,9 @@ const StyledHeader = styled.th.withConfig({
   `);
 const HeaderContentWrapper = styled.div.withConfig({
   componentId: "sc-1q458rb-1"
-})(["display:flex;align-items:center;justify-content:start;gap:inherit;"]);
+})(["display:flex;align-items:center;justify-content:start;gap:inherit;", ""], ({
+  $interactive
+}) => $interactive && "cursor: pointer;");
 const SortIcon = styled(SvgImage).withConfig({
   componentId: "sc-1q458rb-2"
 })(["transition:all 200ms;transform:rotate(", ");"], ({
@@ -40238,6 +40248,7 @@ const TableHeader = ({
   ...delegated
 }) => {
   const isSorted = typeof sortDir === "string";
+  const isInteractive = Boolean(typeof onClick === "function" || isSortable && typeof onSort === "function");
   const onHeaderClick = (e) => {
     if (typeof onClick === "function") {
       onClick(e);
@@ -40246,7 +40257,7 @@ const TableHeader = ({
       onSort();
     }
   };
-  return /* @__PURE__ */ jsx(StyledHeader, { $size: size2, ...delegated, children: /* @__PURE__ */ jsxs(HeaderContentWrapper, { onClick: onHeaderClick, children: [
+  return /* @__PURE__ */ jsx(StyledHeader, { $size: size2, ...delegated, children: /* @__PURE__ */ jsxs(HeaderContentWrapper, { onClick: onHeaderClick, $interactive: isInteractive, children: [
     isSorted && isSortable && sortPosition == "start" && /* @__PURE__ */ jsx(SortIcon, { $sortDir: sortDir, name: "arrow-down", size: "sm" }),
     label,
     isSorted && isSortable && sortPosition == "end" && /* @__PURE__ */ jsx(SortIcon, { $sortDir: sortDir, name: "arrow-down", size: "sm" })
@@ -44042,7 +44053,8 @@ const click$2 = {
     color: {
       stroke: {
         "default": "#323232",
-        muted: "#323232"
+        muted: "#323232",
+        danger: "#ffbaba"
       },
       background: {
         "default": "#1F1F1C",
@@ -44050,7 +44062,8 @@ const click$2 = {
       },
       label: {
         "default": "#b3b6bd",
-        muted: "#b3b6bd"
+        muted: "#b3b6bd",
+        danger: "#ffbaba"
       },
       title: {
         "default": "rgb(97.5% 97.5% 97.5%)",
@@ -45918,7 +45931,8 @@ const click$1 = {
     color: {
       stroke: {
         "default": "#e6e7e9",
-        muted: "#e6e7e9"
+        muted: "#e6e7e9",
+        danger: "#c10000"
       },
       background: {
         "default": "#ffffff",
@@ -45926,7 +45940,8 @@ const click$1 = {
       },
       label: {
         "default": "#696e79",
-        muted: "#696e79"
+        muted: "#696e79",
+        danger: "#c10000"
       },
       title: {
         "default": "lch(11.1 1.37 305)",
@@ -47977,7 +47992,8 @@ const click = {
     color: {
       stroke: {
         "default": "#e6e7e9",
-        muted: "#e6e7e9"
+        muted: "#e6e7e9",
+        danger: "#c10000"
       },
       background: {
         "default": "#ffffff",
@@ -47985,7 +48001,8 @@ const click = {
       },
       label: {
         "default": "#696e79",
-        muted: "#696e79"
+        muted: "#696e79",
+        danger: "#c10000"
       },
       title: {
         "default": "lch(11.1 1.37 305)",