@clickhouse/click-ui 0.0.53 → 0.0.55

package/dist/click-ui.es.js

@@ -1574,7 +1574,7 @@ const Ec = (e) => /* @__PURE__ */ o.jsxs("svg", { width: "24", height: "25", vie
   ] }),
   /* @__PURE__ */ o.jsx("defs", { children: /* @__PURE__ */ o.jsx("clipPath", { id: "clip0_3880_12442", children: /* @__PURE__ */ o.jsx("rect", { width: "30", height: "20", fill: "white" }) }) })
 ] }), B7 = (e) => /* @__PURE__ */ o.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 30, height: 20, viewBox: "0 0 30 20", fill: "none", ...e, children: [
-  /* @__PURE__ */ o.jsxs("g", { "clip-path": "url(#swedenFlagClipPath)", children: [
+  /* @__PURE__ */ o.jsxs("g", { clipPath: "url(#swedenFlagClipPath)", children: [
     /* @__PURE__ */ o.jsx("path", { d: "M0 0H30V20H0V0Z", fill: "#006AA7" }),
     /* @__PURE__ */ o.jsx("path", { d: "M0 8H9.375V0H13.125V8H30V12H13.125V20H9.375V12H0V8Z", fill: "#FECC00" })
   ] }),
@@ -6639,25 +6639,28 @@ const yu = bu, ku = Cu, $u = xu, f_ = ({
 ] }) }), u_ = ({
   label: e = "Label",
   title: t = "Title",
-  size: n,
-  state: r
-}) => /* @__PURE__ */ o.jsxs(Fu, { $state: r, $size: n, children: [
-  /* @__PURE__ */ o.jsx(Iu, { $state: r, $size: n, children: e }),
-  /* @__PURE__ */ o.jsx(Hu, { $state: r, $size: n, children: t })
+  height: n = "6rem",
+  size: r,
+  state: i
+}) => /* @__PURE__ */ o.jsxs(Fu, { $state: i, $size: r, $height: n, children: [
+  /* @__PURE__ */ o.jsx(Iu, { $state: i, $size: r, children: e }),
+  /* @__PURE__ */ o.jsx(Hu, { $state: i, $size: r, children: t })
 ] }), Fu = $.div.withConfig({
   componentId: "sc-u5029o-0"
-})(["display:flex;", ""], ({
+})(["display:flex;justify-content:center;box-sizing:border-box;", ""], ({
   $state: e = "default",
   $size: t = "lg",
-  theme: n
+  $height: n = "fixed",
+  theme: r
 }) => `
-    background-color: ${n.click.bigStat.color.background[e]};
-    color: ${n.click.bigStat.color.label[e]};
-    font: ${n.click.bigStat.typography[t].label[e]};
-    border-radius: ${n.click.bigStat.radii.all};
-    border: ${n.click.bigStat.stroke} solid ${n.click.bigStat.color.stroke[e]};
-    gap: ${n.click.bigStat.space.gap};
-    padding: ${n.click.bigStat.space.all};
+    background-color: ${r.click.bigStat.color.background[e]};
+    color: ${r.click.bigStat.color.label[e]};
+    font: ${r.click.bigStat.typography[t].label[e]};
+    border-radius: ${r.click.bigStat.radii.all};
+    border: ${r.click.bigStat.stroke} solid ${r.click.bigStat.color.stroke[e]};
+    gap: ${r.click.bigStat.space.gap};
+    padding: ${n === "fixed" ? `0 ${r.click.bigStat.space.all}` : r.click.bigStat.space.all};
+    min-height: ${n !== void 0 ? `${n}` : "auto"};
     flex-direction: ${t === "sm" ? "column-reverse" : "column"};
   `), Iu = $.div.withConfig({
   componentId: "sc-u5029o-1"
@@ -6920,13 +6923,15 @@ const Wu = $.div.withConfig({
   ] })
 ] }), Xu = $.div.withConfig({
   componentId: "sc-2dguvi-0"
-})(["background-color:", ";border-radius:", ";border:", ";display:flex;max-width:100%;text-align:center;flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,&:focus{background-color:", ";cursor:pointer;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}&[disabled],&[disabled]:hover,&[disabled]:active{background-color:", ";color:", ";border:1px solid ", ";cursor:not-allowed;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}"], ({
+})(["background-color:", ";border-radius:", ";border:", ";display:flex;max-width:100%;text-align:", ";flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,&:focus{background-color:", ";cursor:pointer;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}&:active{border-color:", ";}&[disabled],&[disabled]:hover,&[disabled]:active{background-color:", ";color:", ";border:1px solid ", ";cursor:not-allowed;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}", ""], ({
   theme: e
 }) => e.click.card.primary.color.background.default, ({
   theme: e
 }) => e.click.card.primary.radii.all, ({
   theme: e
 }) => `1px solid ${e.click.card.primary.color.stroke.default}`, ({
+  $alignContent: e
+}) => e === "start" ? "left" : e === "end" ? "right" : "center", ({
   $size: e = "md",
   theme: t
 }) => `${t.click.card.primary.space[e].x} ${t.click.card.primary.space[e].y}`, ({
@@ -6947,6 +6952,8 @@ const Wu = $.div.withConfig({
   theme: e
 }) => e.click.button.basic.color.primary.stroke.active, ({
   theme: e
+}) => e.click.button.basic.color.primary.stroke.active, ({
+  theme: e
 }) => e.click.card.primary.color.background.disabled, ({
   theme: e
 }) => e.click.card.primary.color.title.disabled, ({
@@ -6959,7 +6966,10 @@ const Wu = $.div.withConfig({
   theme: e
 }) => e.click.button.basic.color.primary.background.disabled, ({
   theme: e
-}) => e.click.button.basic.color.primary.stroke.disabled), Ju = $.div.withConfig({
+}) => e.click.button.basic.color.primary.stroke.disabled, ({
+  $isSelected: e,
+  theme: t
+}) => e ? `border-color: ${t.click.button.basic.color.primary.stroke.active};` : ""), Ju = $.div.withConfig({
   componentId: "sc-2dguvi-1"
 })(["display:flex;flex-direction:column;align-items:center;gap:", ";h3{color:", ";}svg{height:", ";width:", ";}"], ({
   $size: e = "md",
@@ -6979,28 +6989,34 @@ const Wu = $.div.withConfig({
   $size: e = "md",
   theme: t
 }) => t.click.card.primary.space[e].gap), g_ = ({
-  title: e,
-  icon: t,
-  hasShadow: n = !1,
-  description: r,
-  infoUrl: i,
-  infoText: a,
-  size: s,
-  disabled: l = !1,
-  onButtonClick: c,
-  ...d
+  alignContent: e,
+  title: t,
+  icon: n,
+  hasShadow: r = !1,
+  description: i,
+  infoUrl: a,
+  infoText: s,
+  size: l,
+  disabled: c = !1,
+  onButtonClick: d,
+  isSelected: u,
+  children: f,
+  ...p
 }) => {
-  const u = (p) => {
-    typeof c == "function" && c(p), i && i.length > 0 && window.open(i, "_blank");
-  }, f = i || typeof c == "function" ? or : "div";
-  return /* @__PURE__ */ o.jsxs(Xu, { $hasShadow: n, $size: s, $disabled: l, ...d, children: [
-    /* @__PURE__ */ o.jsxs(Ju, { $size: s, $disabled: l, children: [
-      /* @__PURE__ */ o.jsx(fe, { name: t, "aria-hidden": !0 }),
-      /* @__PURE__ */ o.jsx(Bs, { type: "h3", children: e })
+  const h = (g) => {
+    typeof d == "function" && d(g), a && a.length > 0 && window.open(a, "_blank");
+  }, b = a || typeof d == "function" ? or : "div";
+  return /* @__PURE__ */ o.jsxs(Xu, { $alignContent: e, $hasShadow: r, $size: l, $disabled: c, $isSelected: u, ...p, children: [
+    /* @__PURE__ */ o.jsxs(Ju, { $size: l, $disabled: c, children: [
+      n && /* @__PURE__ */ o.jsx(fe, { name: n, "aria-hidden": !0 }),
+      t && /* @__PURE__ */ o.jsx(Bs, { type: "h3", children: t })
+    ] }),
+    (i || f) && /* @__PURE__ */ o.jsxs(Qu, { $size: l, children: [
+      /* @__PURE__ */ o.jsx(en, { color: "muted", children: i }),
+      f
     ] }),
-    /* @__PURE__ */ o.jsx(Qu, { $size: s, children: /* @__PURE__ */ o.jsx(en, { color: "muted", children: r }) }),
-    s == "sm" && /* @__PURE__ */ o.jsx(Yl, { size: "sm" }),
-    a && /* @__PURE__ */ o.jsx(f, { onClick: u, disabled: l, children: a })
+    l == "sm" && /* @__PURE__ */ o.jsx(Yl, { size: "sm" }),
+    s && /* @__PURE__ */ o.jsx(b, { onClick: h, disabled: c, children: s })
   ] });
 };
 function bi(e) {
@@ -11972,12 +11988,13 @@ const M_ = ({
   children: i,
   orientation: a = "horizontal",
   width: s,
-  fillWidth: l,
-  height: c,
-  fillHeight: d,
-  alignItems: u = "center",
-  ...f
-}) => /* @__PURE__ */ o.jsx(Tv, { $hasBorder: e, $hasShadow: t, $color: n, $padding: r, $width: s, $orientation: a, $fillWidth: l, $height: c, $fillHeight: d, $alignItems: u, ...f, children: i }), Tv = $.div.withConfig({
+  radii: l = "sm",
+  fillWidth: c,
+  height: d,
+  fillHeight: u,
+  alignItems: f = "center",
+  ...p
+}) => /* @__PURE__ */ o.jsx(Tv, { $hasBorder: e, $hasShadow: t, $color: n, $padding: r, $width: s, $radii: l, $orientation: a, $fillWidth: c, $height: d, $fillHeight: u, $alignItems: f, ...p, children: i }), Tv = $.div.withConfig({
   componentId: "sc-1q78udp-0"
 })(["display:flex;flex-flow:", ";align-items:", ";width:", ";height:", ";background-color:", ";border-radius:", ";padding:", ";border:", ";box-shadow:", ";gap:0.625rem;"], ({
   $orientation: e = "horizontal"
@@ -11993,8 +12010,9 @@ const M_ = ({
   $color: e = "default",
   theme: t
 }) => t.click.panel.color.background[e], ({
-  theme: e
-}) => e.click.panel.radii.all, ({
+  $radii: e = "sm",
+  theme: t
+}) => t.click.panel.radii[e], ({
   $padding: e = "md",
   theme: t
 }) => t.click.panel.space.y[e], ({
@@ -18068,6 +18086,64 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
       }
     }
   },
+  grid: {
+    header: {
+      color: {
+        background: {
+          default: "#f6f7fa",
+          hover: "#f6f7fa",
+          active: "lch(94.8 1.53 272)"
+        },
+        title: {
+          default: "#161517"
+        },
+        icon: {
+          default: "#161517"
+        },
+        checkbox: {
+          background: {
+            default: "#cccfd3"
+          },
+          border: {
+            default: "#808691"
+          }
+        }
+      }
+    },
+    row: {
+      color: {
+        background: {
+          default: "#ffffff",
+          hover: "#dae6fc",
+          active: "lch(91.1 11.9 266)"
+        },
+        stroke: {
+          default: "lch(91.6 1.1 266)",
+          hover: "#FFC029",
+          active: "#FFC029"
+        },
+        text: {
+          default: "#161517"
+        },
+        link: {
+          default: "#C78F0F"
+        },
+        label: {
+          default: "#696e79"
+        }
+      }
+    },
+    global: {
+      color: {
+        stroke: {
+          default: "lch(91.6 1.1 266)"
+        },
+        background: {
+          default: "#ffffff"
+        }
+      }
+    }
+  },
   global: {
     color: {
       text: {
@@ -19141,7 +19217,9 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
     header: {
       color: {
         background: {
-          default: "#282828"
+          default: "#282828",
+          hover: "#282828",
+          active: "lch(18.2 0 0)"
         },
         title: {
           default: "#ffffff"
@@ -19163,8 +19241,8 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
       color: {
         background: {
           default: "#1F1F1C",
-          hover: "#1d1d1d",
-          active: "#1d1d1d"
+          hover: "#1F1F1C",
+          active: "lch(13.9 2.07 105)"
         },
         stroke: {
           default: "lch(27.5 0 0 / 0.3)"
@@ -19299,26 +19377,59 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
     }
   },
   grid: {
-    color: {
-      background: {
-        header: {
-          default: "lch(16.1 0 0 / 0.7)"
+    header: {
+      color: {
+        background: {
+          default: "#282828",
+          hover: "#282828",
+          active: "lch(18.2 0 0)"
         },
-        row: {
-          default: "#1F1F1C"
+        title: {
+          default: "#ffffff"
+        },
+        icon: {
+          default: "#ffffff"
+        },
+        checkbox: {
+          background: {
+            default: "#cccfd3"
+          },
+          border: {
+            default: "#808691"
+          }
         }
-      },
-      text: {
-        header: {
-          default: "#b3b6bd"
+      }
+    },
+    row: {
+      color: {
+        background: {
+          default: "#1F1F1C",
+          hover: "#1F1F1C",
+          active: "lch(13.9 2.07 105)"
         },
-        row: {
+        stroke: {
+          default: "lch(27.5 0 0 / 0.3)",
+          hover: "#FAFF69",
+          active: "#FAFF69"
+        },
+        text: {
           default: "#ffffff"
+        },
+        link: {
+          default: "#FAFF69"
+        },
+        label: {
+          default: "#b3b6bd"
         }
-      },
-      stroke: {
-        cell: {
-          stroke: "lch(27.5 0 0 / 0.3)"
+      }
+    },
+    global: {
+      color: {
+        stroke: {
+          default: "lch(27.5 0 0 / 0.3)"
+        },
+        background: {
+          default: "#1F1F1C"
         }
       }
     }
@@ -20460,7 +20571,7 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
         background: {
           default: "#ffffff",
           hover: "#dae6fc",
-          active: "#dae6fc"
+          active: "lch(91.1 11.9 266)"
         },
         stroke: {
           default: "lch(91.6 1.1 266)"
@@ -20592,26 +20703,59 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
     }
   },
   grid: {
-    color: {
-      background: {
-        header: {
-          default: "lch(97.2 1.57 272 / 0.7)"
+    header: {
+      color: {
+        background: {
+          default: "#f6f7fa",
+          hover: "#f6f7fa",
+          active: "lch(94.8 1.53 272)"
         },
-        row: {
-          default: "#ffffff"
+        title: {
+          default: "#161517"
+        },
+        icon: {
+          default: "#161517"
+        },
+        checkbox: {
+          background: {
+            default: "#cccfd3"
+          },
+          border: {
+            default: "#808691"
+          }
         }
-      },
-      text: {
-        header: {
-          default: "#696e79"
+      }
+    },
+    row: {
+      color: {
+        background: {
+          default: "#ffffff",
+          hover: "#dae6fc",
+          active: "lch(91.1 11.9 266)"
         },
-        row: {
+        stroke: {
+          default: "lch(91.6 1.1 266)",
+          hover: "#151515",
+          active: "#151515"
+        },
+        text: {
           default: "#161517"
+        },
+        link: {
+          default: "#135be6"
+        },
+        label: {
+          default: "#696e79"
         }
-      },
-      stroke: {
-        cell: {
-          stroke: "lch(91.6 1.1 266)"
+      }
+    },
+    global: {
+      color: {
+        stroke: {
+          default: "lch(91.6 1.1 266)"
+        },
+        background: {
+          default: "#ffffff"
         }
       }
     }
@@ -21022,9 +21166,6 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
         }
       }
     },
-    size: {
-      height: "6rem"
-    },
     color: {
       stroke: {
         default: "lch(91.6 1.1 266)"
@@ -22094,7 +22235,10 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
       default: "1px"
     },
     radii: {
-      all: "0.25rem"
+      none: "0",
+      sm: "0.25rem",
+      md: "0.5rem",
+      lg: "0.75rem"
     },
     stroke: {
       default: "1px solid lch(91.6 1.1 266)"
@@ -22678,7 +22822,9 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
       },
       color: {
         background: {
-          default: "#f6f7fa"
+          default: "#f6f7fa",
+          hover: "#f6f7fa",
+          active: "lch(97.3 1.53 272)"
         },
         title: {
           default: "#161517"
@@ -22736,7 +22882,7 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
         background: {
           default: "#ffffff",
           hover: "#dae6fc",
-          active: "#dae6fc"
+          active: "lch(91.1 11.9 266)"
         },
         stroke: {
           default: "lch(91.6 1.1 266)"
@@ -23049,6 +23195,30 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
           y: "0.438rem",
           x: "0.5rem"
         }
+      },
+      title: {
+        default: `500 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      },
+      color: {
+        background: {
+          default: "#f6f7fa",
+          hover: "#f6f7fa",
+          active: "lch(94.8 1.53 272)"
+        },
+        title: {
+          default: "#161517"
+        },
+        icon: {
+          default: "#161517"
+        },
+        checkbox: {
+          background: {
+            default: "#cccfd3"
+          },
+          border: {
+            default: "#808691"
+          }
+        }
       }
     },
     body: {
@@ -23059,26 +23229,41 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
         }
       }
     },
-    color: {
-      background: {
-        header: {
-          default: "lch(97.2 1.57 272 / 0.7)"
-        },
-        row: {
-          default: "#ffffff"
-        }
-      },
+    cell: {
       text: {
-        header: {
-          default: "#696e79"
+        default: `500 0.875rem/1.7 "Inconsolata", '"SFMono Regular"', monospace`
+      }
+    },
+    row: {
+      color: {
+        background: {
+          default: "#ffffff",
+          hover: "#dae6fc",
+          active: "lch(91.1 11.9 266)"
         },
-        row: {
+        stroke: {
+          default: "lch(91.6 1.1 266)",
+          hover: "#151515",
+          active: "#151515"
+        },
+        text: {
           default: "#161517"
+        },
+        link: {
+          default: "#135be6"
+        },
+        label: {
+          default: "#696e79"
         }
-      },
-      stroke: {
-        cell: {
-          stroke: "lch(91.6 1.1 266)"
+      }
+    },
+    global: {
+      color: {
+        stroke: {
+          default: "lch(91.6 1.1 266)"
+        },
+        background: {
+          default: "#ffffff"
         }
       }
     }
@@ -23430,6 +23615,7 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
     0: "0",
     1: "0.25rem",
     2: "0.5rem",
+    3: "0.75rem",
     full: "9999px"
   },
   width: {
@@ -23520,12 +23706,14 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
   return /* @__PURE__ */ o.jsx(WS, { ...n, children: /* @__PURE__ */ o.jsx(lc.Provider, { value: r, children: e }) });
 }, GS = $.div.withConfig({
   componentId: "sc-xro1ly-1"
-})(["position:relative;width:100%;padding:0;", ""], ({
+})(["display:flex;flex-direction:column;position:relative;width:100%;padding:0;", ""], ({
   theme: e,
   $type: t,
   $status: n,
   $isOpen: r
 }) => `
+    row-gap: ${e.click.stepper.vertical[t].content.space.gap.y};
+    column-gap: ${e.click.stepper.vertical[t].content.space.gap.x};
     padding-bottom: ${e.click.stepper.vertical[t].content.space.bottom[r ? "active" : "default"]};
     &:not(:last-of-type) {
       &::before{
@@ -23541,9 +23729,7 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
   `), KS = $.button.withConfig({
   componentId: "sc-xro1ly-2"
 })(["", ""], ({
-  theme: e,
-  $type: t,
-  $status: n
+  $status: e
 }) => `
     display: flex;
     align-items: center;
@@ -23551,10 +23737,9 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
     width: 100%;
     background: transparent;
     border: none;
-    cursor: ${n === "active" ? "default" : n === "complete" ? "pointer" : "not-allowed"};
+    gap: inherit;
+    cursor: ${e === "active" ? "default" : e === "complete" ? "pointer" : "not-allowed"};
     flex-direction: row;
-    row-gap: ${e.click.stepper.vertical[t].content.space.gap.y};
-    column-gap: ${e.click.stepper.vertical[t].content.space.gap.x};
   `), qS = $.div.withConfig({
   componentId: "sc-xro1ly-3"
 })(["", ""], ({
@@ -23594,13 +23779,14 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
   componentId: "sc-xro1ly-4"
 })(["color:inherit;path{stroke-width:3;}"]), XS = $.div.withConfig({
   componentId: "sc-xro1ly-5"
-})(["", ")"], ({
+})(["display:flex;flex-direction:column;", ")"], ({
   theme: e,
   $type: t,
   $status: n
 }) => `
     font: ${e.click.stepper.vertical[t].typography.title.default};
     color: ${e.click.stepper.vertical[t].color.title[n]};
+    gap: inherit;
   `), JS = $.div.withConfig({
   componentId: "sc-xro1ly-6"
 })(["display:flex;width:100%;flex-direction:column;", ""], ({
@@ -23620,7 +23806,7 @@ const r2 = /* @__PURE__ */ Ao(HS), B0 = {
     type: s
   } = Ct(lc), l = !r || e === "active";
   return /* @__PURE__ */ o.jsxs(GS, { $type: s, $status: e, $isOpen: l, children: [
-    /* @__PURE__ */ o.jsxs(KS, { $type: s, $status: e, disabled: e === "incomplete" || i, ...a, children: [
+    /* @__PURE__ */ o.jsxs(KS, { $status: e, disabled: e === "incomplete" || i, ...a, children: [
       /* @__PURE__ */ o.jsx(qS, { $type: s, $status: e, children: s === "numbered" && e === "complete" ? /* @__PURE__ */ o.jsx(YS, { name: "check", size: "xs" }) : null }),
       n && /* @__PURE__ */ o.jsx(XS, { $type: s, $status: e, children: n })
     ] }),