@clickhouse/click-ui 0.0.104 → 0.0.105

package/dist/click-ui.es.js

@@ -10749,20 +10749,20 @@ const Pk = G.div.withConfig({
   $grow: e,
   $shrink: t
 }) => `
-    ${e && `flex: ${e};`}
-    ${t && `flex-shrink: ${t};`}
+    ${e && `flex: ${e}`};
+    ${t && `flex-shrink: ${t}`};
   `, ({
   $fillHeight: e,
   $maxHeight: t,
   $minHeight: n
 }) => `
-    ${e && "height: 100%;"}
-    ${t && `max-height: ${t};`}
-    ${n && `min-height: ${n};`}
+    ${e && "height: 100%"};
+    ${t && `max-height: ${t}`};
+    ${n && `min-height: ${n}`};
   `, ({
   $overflow: e
 }) => `
-    ${e && `overflow: ${e};`}
+    ${e && `overflow: ${e}`};
   `, ({
   $wrap: e = "nowrap"
 }) => e, ({
@@ -11112,16 +11112,17 @@ const fS = Co({
   $size: t = "default"
 }) => e.click.flyout.size[t].width, fS, ({
   theme: e,
-  $strategy: t
+  $strategy: t,
+  $type: n = "default"
 }) => `
     position: ${t};
     height: ${t === "relative" ? "100%" : "auto"};
-    padding: ${e.click.flyout.space.y} ${e.click.flyout.space.x};
-    gap: ${e.click.flyout.space.gap};
+    padding: 0 ${e.click.flyout.space[n].x}
+    gap: ${e.click.flyout.space[n].gap};
     border-left: 1px solid ${e.click.flyout.color.stroke.default};
     background: ${e.click.flyout.color.background.default};
     box-shadow: ${e.click.flyout.shadow.default}};
-    
+
     @media (max-width: 1024px) {
       ${t === "relative" ? `
             position: absolute !important;` : ""}
@@ -11143,75 +11144,84 @@ const fS = Co({
   container: n,
   strategy: o = "relative",
   size: i,
-  closeOnInteractOutside: a = !1,
-  onInteractOutside: l,
-  ...c
+  type: a = "default",
+  closeOnInteractOutside: l = !1,
+  onInteractOutside: c,
+  ...u
 }) => /* @__PURE__ */ r.jsxs(f8, { container: n, children: [
   e && /* @__PURE__ */ r.jsx(p8, { className: "DialogOverlay" }),
-  /* @__PURE__ */ r.jsx(pS, { $size: i, $strategy: o, onInteractOutside: (u) => {
-    a || u.preventDefault(), typeof l == "function" && l(u);
-  }, ...c, children: t })
+  /* @__PURE__ */ r.jsx(pS, { $size: i, $type: a, $strategy: o, onInteractOutside: (h) => {
+    l || h.preventDefault(), typeof c == "function" && c(h);
+  }, ...u, children: t })
 ] });
 w8.displayName = "Flyout.Content";
 _1.Content = w8;
 const hS = G.div.withConfig({
   componentId: "sc-1vtv6sf-2"
 })(["display:flex;flex-direction:column;", ""], ({
-  theme: e
+  theme: e,
+  type: t = "default"
 }) => `
-    gap: ${e.click.flyout.space.gap};
-    padding: 0 ${e.click.flyout.space.content.x};
-  `), y8 = (e) => /* @__PURE__ */ r.jsx(hS, { ...e });
+    gap: ${e.click.flyout.space[t].gap};
+    padding: 0 ${e.click.flyout.space[t].content.x};
+  `), y8 = ({
+  type: e,
+  ...t
+}) => /* @__PURE__ */ r.jsx(hS, { type: e, ...t });
 y8.displayName = "Flyout.Element";
 _1.Element = y8;
 const pd = G.div.withConfig({
   componentId: "sc-1vtv6sf-3"
 })(["display:flex;justify-content:space-between;align-items:flex-start;", ""], ({
-  theme: e
+  theme: e,
+  type: t = "default"
 }) => `
-    row-gap: ${e.click.flyout.space.content["row-gap"]};
-    column-gap: ${e.click.flyout.space.content["column-gap"]};
-    padding: 0 ${e.click.flyout.space.content.x};
+    row-gap: ${e.click.flyout.space[t].content["row-gap"]};
+    column-gap: ${e.click.flyout.space[t].content["column-gap"]};
+    padding: ${e.click.flyout.space[t].y} ${e.click.flyout.space[t].y} 0 ${e.click.flyout.space[t].y} ;
   `), hd = G.div.withConfig({
   componentId: "sc-1vtv6sf-4"
 })(["display:flex;flex-direction:column;flex:1;"]), gS = G(Yk).withConfig({
   componentId: "sc-1vtv6sf-5"
 })(["", ""], ({
-  theme: e
+  theme: e,
+  type: t = "default"
 }) => `
     color: ${e.click.flyout.color.title.default};
-    font: ${e.click.flyout.typography.title.default};
+    font: ${e.click.flyout.typography[t].title.default};
     margin: 0;
     padding: 0;
   `), vS = G(Kk).withConfig({
   componentId: "sc-1vtv6sf-6"
 })(["", ""], ({
-  theme: e
+  theme: e,
+  type: t = "default"
 }) => `
     color: ${e.click.flyout.color.description.default};
-    font: ${e.click.flyout.typography.description.default};
+    font: ${e.click.flyout.typography[t].description.default};
     margin: 0;
     padding: 0;
   `), k8 = ({
   title: e,
   description: t,
-  children: n,
-  ...o
-}) => n ? /* @__PURE__ */ r.jsxs(s4, { children: [
-  /* @__PURE__ */ r.jsxs(pd, { ...o, children: [
-    /* @__PURE__ */ r.jsx(hd, { children: n }),
+  type: n,
+  children: o,
+  ...i
+}) => o ? /* @__PURE__ */ r.jsxs(s4, { children: [
+  /* @__PURE__ */ r.jsxs(pd, { type: n, ...i, children: [
+    /* @__PURE__ */ r.jsx(hd, { children: o }),
     /* @__PURE__ */ r.jsx(m2, { asChild: !0, children: /* @__PURE__ */ r.jsx(Z0, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ r.jsx(dt, { name: "cross", size: "lg" }) }) })
   ] }),
-  /* @__PURE__ */ r.jsx(Ua, { size: "xs" })
+  /* @__PURE__ */ r.jsx(Ua, { size: "lg" })
 ] }) : /* @__PURE__ */ r.jsxs(s4, { children: [
-  /* @__PURE__ */ r.jsxs(pd, { ...o, children: [
+  /* @__PURE__ */ r.jsxs(pd, { type: n, ...i, children: [
     /* @__PURE__ */ r.jsxs(hd, { children: [
-      /* @__PURE__ */ r.jsx(gS, { children: e }),
-      t && /* @__PURE__ */ r.jsx(vS, { children: t })
+      /* @__PURE__ */ r.jsx(gS, { type: n, children: e }),
+      t && /* @__PURE__ */ r.jsx(vS, { type: n, children: t })
     ] }),
     /* @__PURE__ */ r.jsx(m2, { asChild: !0, children: /* @__PURE__ */ r.jsx(Z0, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ r.jsx(dt, { name: "cross", size: "lg" }) }) })
   ] }),
-  /* @__PURE__ */ r.jsx(Ua, { size: "xs" })
+  /* @__PURE__ */ r.jsx(Ua, { size: "lg" })
 ] });
 k8.displayName = "Flyout.Header";
 _1.Header = k8;
@@ -11228,11 +11238,12 @@ _1.Body = S8;
 const bS = G.div.withConfig({
   componentId: "sc-1vtv6sf-8"
 })(["display:flex;justify-content:flex-end;align-items:center;", ""], ({
-  theme: e
+  theme: e,
+  type: t = "default"
 }) => `
-    row-gap: ${e.click.flyout.space.content["row-gap"]};
-    column-gap: ${e.click.flyout.space.content["column-gap"]};
-    padding: 0 ${e.click.flyout.space.content.x};
+    row-gap: ${e.click.flyout.space[t].content["row-gap"]};
+    column-gap: ${e.click.flyout.space[t].content["column-gap"]};
+    padding: ${e.click.flyout.space[t].y} ${e.click.flyout.space[t].content.x};
   `), L8 = ({
   children: e,
   ...t
@@ -11319,28 +11330,28 @@ const WD = ({
   $rowGap: o
 }) => `
     gap: ${t ? e.click.gridContainer.gap[t] : "inherit"};
-    ${n && `column-gap: ${e.click.gridContainer.gap[n]};`}
-    ${o && `row-gap: ${e.click.gridContainer.gap[o]};`}
+    ${n && `column-gap: ${e.click.gridContainer.gap[n]}`};
+    ${o && `row-gap: ${e.click.gridContainer.gap[o]}`};
   `, ({
   $fillWidth: e,
   $maxWidth: t,
   $minWidth: n
 }) => `
     width: ${e ? "100%" : "auto"};
-    ${typeof t == "string" ? `max-width: ${t};` : ""}
-    ${typeof n == "string" ? `min-width: ${n};` : ""}
+    ${typeof t == "string" && `max-width: ${t}`};
+    ${typeof n == "string" && `min-width: ${n}`};
   `, ({
   $height: e,
   $maxHeight: t,
   $minHeight: n
 }) => `
-    ${typeof e == "string" && `height: ${e};`}
-    ${typeof t == "string" && `max-height: ${t};`}
-    ${typeof n == "string" && `min-height: ${n};`}
+    ${typeof e == "string" && `height: ${e}`};
+    ${typeof t == "string" && `max-height: ${t}`};
+    ${typeof n == "string" && `min-height: ${n}`};
   `, ({
   $overflow: e
 }) => `
-    ${typeof e == "string" && `overflow: ${e};`}
+    ${typeof e == "string" && `overflow: ${e}`};
   `, ({
   theme: e
 }) => e.breakpoint.sizes.md, ({
@@ -23599,9 +23610,9 @@ const mM = G.div.withConfig({
       typeof o == "number" ? E(o) : o,
       " rows"
     ] }),
-    /* @__PURE__ */ r.jsxs(C0, { gap: "xxs", children: [
+    /* @__PURE__ */ r.jsxs(C0, { gap: "xxs", fillWidth: !1, children: [
       /* @__PURE__ */ r.jsx(Yr, { icon: "chevron-left", type: "ghost", disabled: t === 1, onClick: N, "data-testid": "prev-btn" }),
-      /* @__PURE__ */ r.jsx(C0, { maxWidth: "50px", children: /* @__PURE__ */ r.jsx(pM, { onChange: D, value: t, loading: !1, onKeyDown: j, min: 1, max: e, onFocus: w, onBlur: _ }) }),
+      /* @__PURE__ */ r.jsx(C0, { maxWidth: "50px", fillWidth: !1, children: /* @__PURE__ */ r.jsx(pM, { onChange: D, value: t, loading: !1, onKeyDown: j, min: 1, max: e, onFocus: w, onBlur: _ }) }),
       !!e && /* @__PURE__ */ r.jsxs(Yo, { component: "div", color: "muted", size: "sm", children: [
         "of ",
         E(e)
@@ -35354,38 +35365,29 @@ const V0 = /* @__PURE__ */ jl(nD), Sf = {
   },
   flyout: {
     space: {
-      y: "1.5rem",
-      x: "0",
-      gap: "1rem",
       default: {
-        top: "0"
-      },
-      inline: {
-        top: "3.5rem",
+        x: "0",
+        y: "1.5rem",
+        gap: "1rem",
+        top: "0",
         content: {
           x: "1.5rem",
+          y: "1.5rem",
           "row-gap": "0.25rem",
           "column-gap": "1rem"
-        },
-        y: "1rem",
-        x: "0",
-        gap: "1rem",
-        default: {
-          top: "0"
-        },
-        inline: {
-          top: "3.5rem",
-          content: {
-            x: "0.75rem",
-            "row-gap": "0.25rem",
-            "column-gap": "0.75rem"
-          }
         }
       },
-      content: {
-        x: "1.5rem",
-        "row-gap": "0.25rem",
-        "column-gap": "1rem"
+      inline: {
+        x: "0",
+        y: "0.75rem",
+        gap: "0.75rem",
+        top: "3.5rem",
+        content: {
+          x: "0.75rem",
+          y: "0.75rem",
+          "row-gap": "0.25rem",
+          "column-gap": "0.75rem"
+        }
       }
     },
     shadow: {
@@ -35406,11 +35408,21 @@ const V0 = /* @__PURE__ */ jl(nD), Sf = {
       }
     },
     typography: {
-      description: {
-        default: `400 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      default: {
+        description: {
+          default: `400 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+        },
+        title: {
+          default: `700 1.25rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+        }
       },
-      title: {
-        default: `700 1.25rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      inline: {
+        description: {
+          default: `400 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+        },
+        title: {
+          default: `600 1rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+        }
       }
     },
     color: {