@clickhouse/click-ui 0.0.126 → 0.0.128

package/dist/click-ui.es.js

@@ -8227,7 +8227,10 @@ const _EllipsisContent = ({
 const EllipsisContent = forwardRef(_EllipsisContent);
 const LabelContainer$1 = styled.div.withConfig({
   componentId: "sc-1likhxd-0"
-})(["display:flex;align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
+})(["display:grid;grid-template-columns:", ";align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
+  $hasIcon,
+  $iconDir
+}) => `${$hasIcon && $iconDir === "start" ? "auto " : ""}1fr${$hasIcon && $iconDir === "end" ? " auto" : ""}`, ({
   theme: theme2
 }) => theme2.click.sidebar.navigation.item.default.space.gap);
 const IconWrapper$3 = ({
@@ -8239,7 +8242,7 @@ const IconWrapper$3 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(LabelContainer$1, { ...props, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(LabelContainer$1, { $hasIcon: typeof icon === "string", $iconDir: iconDir, ...props, children: [
     icon && iconDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: size2, width, height }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(EllipsisContent, { children }),
     icon && iconDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: size2, width, height })
@@ -9728,6 +9731,7 @@ const Badge = ({
 ] }) });
 const BigStat = ({
   fillWidth = false,
+  maxWidth,
   height = "6rem",
   label = "Label",
   order = "titleTop",
@@ -9735,7 +9739,7 @@ const BigStat = ({
   spacing = "sm",
   state = "default",
   title = "Title"
-}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, children: [
+}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, children: [
   /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { $state: state, $size: size2, children: label }),
   /* @__PURE__ */ jsxRuntimeExports.jsx(Title$3, { $state: state, $size: size2, children: title })
 ] });
@@ -9743,6 +9747,7 @@ const Wrapper$b = styled.div.withConfig({
   componentId: "sc-u5029o-0"
 })(["display:flex;justify-content:center;box-sizing:border-box;", ""], ({
   $fillWidth = false,
+  $maxWidth = "none",
   $state = "default",
   $size = "lg",
   $height = "fixed",
@@ -9760,6 +9765,7 @@ const Wrapper$b = styled.div.withConfig({
   min-height: ${$height !== void 0 ? `${$height}` : "auto"};
   flex-direction: ${$order === "titleBottom" ? "column-reverse" : "column"};
   width: ${$fillWidth === true ? "100%" : "auto"};
+  max-width: ${$maxWidth ? $maxWidth : "none"};
   `);
 const Label = styled.div.withConfig({
   componentId: "sc-u5029o-1"
@@ -31375,7 +31381,7 @@ const Grid = forwardRef(({
       if (showToast) {
         createToast({
           title: "Copied successfully",
-          description: "Now you can copy the content",
+          description: "Now you can paste the content",
           type: "success"
         });
       }

package/dist/click-ui.umd.js

@@ -8244,7 +8244,10 @@ var __publicField = (obj, key, value) => {
   const EllipsisContent = React.forwardRef(_EllipsisContent);
   const LabelContainer$1 = styled.div.withConfig({
     componentId: "sc-1likhxd-0"
-  })(["display:flex;align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
+  })(["display:grid;grid-template-columns:", ";align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
+    $hasIcon,
+    $iconDir
+  }) => `${$hasIcon && $iconDir === "start" ? "auto " : ""}1fr${$hasIcon && $iconDir === "end" ? " auto" : ""}`, ({
     theme: theme2
   }) => theme2.click.sidebar.navigation.item.default.space.gap);
   const IconWrapper$3 = ({
@@ -8256,7 +8259,7 @@ var __publicField = (obj, key, value) => {
     children,
     ...props
   }) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(LabelContainer$1, { ...props, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(LabelContainer$1, { $hasIcon: typeof icon === "string", $iconDir: iconDir, ...props, children: [
       icon && iconDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: size2, width, height }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(EllipsisContent, { children }),
       icon && iconDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: size2, width, height })
@@ -9745,6 +9748,7 @@ var __publicField = (obj, key, value) => {
   ] }) });
   const BigStat = ({
     fillWidth = false,
+    maxWidth,
     height = "6rem",
     label = "Label",
     order = "titleTop",
@@ -9752,7 +9756,7 @@ var __publicField = (obj, key, value) => {
     spacing = "sm",
     state = "default",
     title = "Title"
-  }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, children: [
+  }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { $state: state, $size: size2, children: label }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Title$3, { $state: state, $size: size2, children: title })
   ] });
@@ -9760,6 +9764,7 @@ var __publicField = (obj, key, value) => {
     componentId: "sc-u5029o-0"
   })(["display:flex;justify-content:center;box-sizing:border-box;", ""], ({
     $fillWidth = false,
+    $maxWidth = "none",
     $state = "default",
     $size = "lg",
     $height = "fixed",
@@ -9777,6 +9782,7 @@ var __publicField = (obj, key, value) => {
   min-height: ${$height !== void 0 ? `${$height}` : "auto"};
   flex-direction: ${$order === "titleBottom" ? "column-reverse" : "column"};
   width: ${$fillWidth === true ? "100%" : "auto"};
+  max-width: ${$maxWidth ? $maxWidth : "none"};
   `);
   const Label = styled.div.withConfig({
     componentId: "sc-u5029o-1"
@@ -31392,7 +31398,7 @@ var __publicField = (obj, key, value) => {
         if (showToast) {
           createToast({
             title: "Copied successfully",
-            description: "Now you can copy the content",
+            description: "Now you can paste the content",
             type: "success"
           });
         }

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

@@ -5,6 +5,7 @@ export type bigStatSpacing = "sm" | "lg";
 export type bigStatState = "default" | "muted";
 export interface BigStatProps {
     fillWidth?: boolean;
+    maxWidth?: string;
     height?: string;
     label: React.ReactNode;
     order?: bigStatOrder;
@@ -13,4 +14,4 @@ export interface BigStatProps {
     state?: bigStatState;
     title: React.ReactNode;
 }
-export declare const BigStat: ({ fillWidth, height, label, order, size, spacing, state, title, }: BigStatProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BigStat: ({ fillWidth, maxWidth, height, label, order, size, spacing, state, title, }: BigStatProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.126",
+  "version": "0.0.128",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",