@clickhouse/click-ui 0.0.127 → 0.0.129

package/dist/click-ui.es.js

@@ -2615,6 +2615,12 @@ const Metabase = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { widt
   /* @__PURE__ */ jsxRuntimeExports.jsx("path", { opacity: "0.2", d: "M43.0456 53.0913C45.1635 53.0913 46.8803 51.347 46.8803 49.1953C46.8803 47.0436 45.1635 45.2993 43.0456 45.2993C40.9278 45.2993 39.2109 47.0436 39.2109 49.1953C39.2109 51.347 40.9278 53.0913 43.0456 53.0913Z", fill: "#509EE3" }),
   /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M53.7829 53.0913C55.9008 53.0913 57.6176 51.347 57.6176 49.1953C57.6176 47.0436 55.9008 45.2993 53.7829 45.2993C51.6651 45.2993 49.9482 47.0436 49.9482 49.1953C49.9482 51.347 51.6651 53.0913 53.7829 53.0913Z", fill: "#509EE3" })
 ] });
+const Microsoft = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.43457 6.43506H29.7824V30.7829H5.43457V6.43506Z", fill: "#F35325" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M32.2178 6.43506H56.5656V30.7829H32.2178V6.43506Z", fill: "#81BC06" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.43457 33.2173H29.7824V57.5651H5.43457V33.2173Z", fill: "#05A6F0" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M32.2178 33.2173H56.5656V57.5651H32.2178V33.2173Z", fill: "#FFBA08" })
+] });
 const MongoDb = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsxRuntimeExports.jsx("g", { clipPath: "url(#clip0_3281_13740)", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M37.5006 7.10975C34.8146 3.93331 32.5016 0.707252 32.029 0.0372239C31.9793 -0.0124079 31.9047 -0.0124079 31.8549 0.0372239C31.3824 0.707252 29.0694 3.93331 26.3833 7.10975C3.32793 36.4172 30.0145 56.1957 30.0145 56.1957L30.2383 56.3444C30.4373 59.397 30.9347 63.7893 30.9347 63.7893H31.9295H32.9244C32.9244 63.7893 33.4218 59.4216 33.6208 56.3444L33.8446 56.1708C33.8695 56.1708 60.5561 36.4172 37.5006 7.10975ZM31.9295 55.749C31.9295 55.749 30.7357 54.7315 30.4124 54.2102V54.1607L31.8549 22.2475C31.8549 22.1482 32.0042 22.1482 32.0042 22.2475L33.4467 54.1607V54.2102C33.1233 54.7315 31.9295 55.749 31.9295 55.749Z", fill: "#00ED64" }) }),
   /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_3281_13740", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "29.8833", height: "64", fill: "white", transform: "translate(17)" }) }) })
@@ -2818,6 +2824,7 @@ const LogosLight = {
   kafka: KafkaLight,
   kubenetes: Kubenetes,
   metabase: Metabase,
+  microsoft: Microsoft,
   mongodb: MongoDb,
   mysql: MySQL,
   nodejs: NodeJs,
@@ -2932,6 +2939,7 @@ const LogosDark = {
   kafka: KafkaDark,
   kubenetes: Kubenetes,
   metabase: Metabase,
+  microsoft: Microsoft,
   mongodb: MongoDb,
   mysql: MySQL,
   nodejs: NodeJs,
@@ -8227,7 +8235,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 +8250,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 })
@@ -9735,8 +9746,9 @@ const BigStat = ({
   size: size2,
   spacing = "sm",
   state = "default",
-  title = "Title"
-}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, children: [
+  title = "Title",
+  ...props
+}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, ...props, children: [
   /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { $state: state, $size: size2, children: label }),
   /* @__PURE__ */ jsxRuntimeExports.jsx(Title$3, { $state: state, $size: size2, children: title })
 ] });
@@ -31378,7 +31390,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

@@ -2632,6 +2632,12 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { opacity: "0.2", d: "M43.0456 53.0913C45.1635 53.0913 46.8803 51.347 46.8803 49.1953C46.8803 47.0436 45.1635 45.2993 43.0456 45.2993C40.9278 45.2993 39.2109 47.0436 39.2109 49.1953C39.2109 51.347 40.9278 53.0913 43.0456 53.0913Z", fill: "#509EE3" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M53.7829 53.0913C55.9008 53.0913 57.6176 51.347 57.6176 49.1953C57.6176 47.0436 55.9008 45.2993 53.7829 45.2993C51.6651 45.2993 49.9482 47.0436 49.9482 49.1953C49.9482 51.347 51.6651 53.0913 53.7829 53.0913Z", fill: "#509EE3" })
   ] });
+  const Microsoft = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.43457 6.43506H29.7824V30.7829H5.43457V6.43506Z", fill: "#F35325" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M32.2178 6.43506H56.5656V30.7829H32.2178V6.43506Z", fill: "#81BC06" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.43457 33.2173H29.7824V57.5651H5.43457V33.2173Z", fill: "#05A6F0" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M32.2178 33.2173H56.5656V57.5651H32.2178V33.2173Z", fill: "#FFBA08" })
+  ] });
   const MongoDb = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("g", { clipPath: "url(#clip0_3281_13740)", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M37.5006 7.10975C34.8146 3.93331 32.5016 0.707252 32.029 0.0372239C31.9793 -0.0124079 31.9047 -0.0124079 31.8549 0.0372239C31.3824 0.707252 29.0694 3.93331 26.3833 7.10975C3.32793 36.4172 30.0145 56.1957 30.0145 56.1957L30.2383 56.3444C30.4373 59.397 30.9347 63.7893 30.9347 63.7893H31.9295H32.9244C32.9244 63.7893 33.4218 59.4216 33.6208 56.3444L33.8446 56.1708C33.8695 56.1708 60.5561 36.4172 37.5006 7.10975ZM31.9295 55.749C31.9295 55.749 30.7357 54.7315 30.4124 54.2102V54.1607L31.8549 22.2475C31.8549 22.1482 32.0042 22.1482 32.0042 22.2475L33.4467 54.1607V54.2102C33.1233 54.7315 31.9295 55.749 31.9295 55.749Z", fill: "#00ED64" }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_3281_13740", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "29.8833", height: "64", fill: "white", transform: "translate(17)" }) }) })
@@ -2835,6 +2841,7 @@ var __publicField = (obj, key, value) => {
     kafka: KafkaLight,
     kubenetes: Kubenetes,
     metabase: Metabase,
+    microsoft: Microsoft,
     mongodb: MongoDb,
     mysql: MySQL,
     nodejs: NodeJs,
@@ -2949,6 +2956,7 @@ var __publicField = (obj, key, value) => {
     kafka: KafkaDark,
     kubenetes: Kubenetes,
     metabase: Metabase,
+    microsoft: Microsoft,
     mongodb: MongoDb,
     mysql: MySQL,
     nodejs: NodeJs,
@@ -8244,7 +8252,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 +8267,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 })
@@ -9752,8 +9763,9 @@ var __publicField = (obj, key, value) => {
     size: size2,
     spacing = "sm",
     state = "default",
-    title = "Title"
-  }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, children: [
+    title = "Title",
+    ...props
+  }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, ...props, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { $state: state, $size: size2, children: label }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Title$3, { $state: state, $size: size2, children: title })
   ] });
@@ -31395,7 +31407,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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import { HTMLAttributes } from "react";
 export type bigStatOrder = "titleTop" | "titleBottom";
 export type bigStatSize = "sm" | "lg";
 export type bigStatSpacing = "sm" | "lg";
 export type bigStatState = "default" | "muted";
-export interface BigStatProps {
+export interface BigStatProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     fillWidth?: boolean;
     maxWidth?: string;
     height?: string;
@@ -14,4 +14,4 @@ export interface BigStatProps {
     state?: bigStatState;
     title: React.ReactNode;
 }
-export declare const BigStat: ({ fillWidth, maxWidth, 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, ...props }: BigStatProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logos/Microsoft.d.ts

@@ -0,0 +1,3 @@
+import { SVGAttributes } from "react";
+declare const Microsoft: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Microsoft;

package/dist/components/Logos/types.d.ts

@@ -1 +1 @@
-export type LogoName = "clickhouse" | "airbyte" | "aws-s3" | "aws-athena" | "aws-kinesis" | "aws-redshift" | "aws-msk" | "kafka" | "fivetran" | "confluent" | "hex" | "tableau" | "grafana" | "superset" | "metabase" | "aws" | "gcp" | "gcs" | "azure" | "azure-event-hub" | "dbeaver" | "dbt" | "jdbc" | "mysql" | "postgres" | "google" | "github" | "decodeable" | "golang" | "prequel" | "python" | "deepnote" | "nodejs" | "datagrip" | "vector" | "kubenetes" | "c#" | "redpanda" | "rust" | "hudi" | "deltalake" | "snowflake" | "mongodb" | "bigquery" | "iceberg" | "upstash" | "warpstream";
+export type LogoName = "clickhouse" | "airbyte" | "aws-s3" | "aws-athena" | "aws-kinesis" | "aws-redshift" | "aws-msk" | "kafka" | "fivetran" | "confluent" | "hex" | "tableau" | "grafana" | "superset" | "metabase" | "microsoft" | "aws" | "gcp" | "gcs" | "azure" | "azure-event-hub" | "dbeaver" | "dbt" | "jdbc" | "mysql" | "postgres" | "google" | "github" | "decodeable" | "golang" | "prequel" | "python" | "deepnote" | "nodejs" | "datagrip" | "vector" | "kubenetes" | "c#" | "redpanda" | "rust" | "hudi" | "deltalake" | "snowflake" | "mongodb" | "bigquery" | "iceberg" | "upstash" | "warpstream";

package/package.json

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