@clickhouse/click-ui 0.0.145 → 0.0.146

package/dist/click-ui.es.js

@@ -10220,13 +10220,20 @@ const HeaderLeft = styled.div.withConfig({
 const Content$3 = styled.div.withConfig({
   componentId: "sc-1drx130-2"
 })(["display:flex;flex-direction:column;flex:1;"]);
-const InfoLink = styled.a.withConfig({
+const CustomIcon = styled.img.withConfig({
   componentId: "sc-1drx130-3"
+})(["height:", ";width:", ";"], ({
+  theme: theme2
+}) => theme2.click.image.lg.size.height, ({
+  theme: theme2
+}) => theme2.click.image.lg.size.width);
+const InfoLink = styled.a.withConfig({
+  componentId: "sc-1drx130-4"
 })(["display:flex;align-items:center;color:", ";text-decoration:none;"], ({
   theme: theme2
 }) => theme2.click.card.secondary.color.link.default);
 const ArrowContainer = styled(SvgImage).withConfig({
-  componentId: "sc-1drx130-4"
+  componentId: "sc-1drx130-5"
 })(["color:", ";height:", ";width:", ";"], ({
   theme: theme2
 }) => theme2.click.card.secondary.color.link.default, ({
@@ -10235,13 +10242,13 @@ const ArrowContainer = styled(SvgImage).withConfig({
   theme: theme2
 }) => theme2.click.image.md.size.width);
 const LinkText = styled(Text).withConfig({
-  componentId: "sc-1drx130-5"
+  componentId: "sc-1drx130-6"
 })([""]);
 const LinkArrow = styled(ArrowContainer).withConfig({
-  componentId: "sc-1drx130-6"
+  componentId: "sc-1drx130-7"
 })([""]);
 const Wrapper$a = styled.div.withConfig({
-  componentId: "sc-1drx130-7"
+  componentId: "sc-1drx130-8"
 })(["background-color:", ";border-radius:", ";border:", ";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,:focus{background-color:", ";cursor:pointer;", ",", "{color:", ';}}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}"], ({
   theme: theme2
 }) => theme2.click.card.secondary.color.background.default, ({
@@ -10275,6 +10282,7 @@ const Wrapper$a = styled.div.withConfig({
 const CardSecondary = ({
   title,
   icon,
+  iconUrl,
   badgeState,
   badgeText = "",
   hasShadow = false,
@@ -10287,7 +10295,7 @@ const CardSecondary = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$a, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$4, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderLeft, { $disabled: disabled, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "lg", "area-hidden": "" }),
+        iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(CustomIcon, { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true, size: "lg" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Title$2, { type: "h3", children: title })
       ] }),
       badgeText && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { text: badgeText, state: disabled == true ? "disabled" : badgeState })
@@ -10445,7 +10453,7 @@ const Wrapper$8 = styled.div.withConfig({
 }) => $isSelected ? `border-color: ${theme2.click.button.basic.color.primary.stroke.active};` : "");
 const Header$3 = styled.div.withConfig({
   componentId: "sc-2dguvi-1"
-})(["display:flex;flex-direction:column;align-items:", ";gap:", ";h3{color:", ";}svg{height:", ";width:", ";}"], ({
+})(["display:flex;flex-direction:column;align-items:", ";gap:", ";h3{color:", ";}svg,img{height:", ";width:", ";}"], ({
   $alignContent = "center"
 }) => ["start", "end"].includes($alignContent) ? `flex-${$alignContent}` : $alignContent, ({
   $size = "md",
@@ -10478,6 +10486,7 @@ const Card = ({
   alignContent,
   title,
   icon,
+  iconUrl,
   hasShadow = false,
   description,
   infoUrl,
@@ -10500,7 +10509,7 @@ const Card = ({
   const Component2 = !!infoUrl || typeof onButtonClick === "function" ? Button : "div";
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$8, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size2, "aria-disabled": disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
     (icon || title) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$3, { $size: size2, $disabled: disabled, $alignContent: alignContent, children: [
-      icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true }),
+      iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true }),
       title && /* @__PURE__ */ jsxRuntimeExports.jsx(Title$2, { type: "h3", children: title })
     ] }),
     (description || children) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Content$2, { $size: size2, $alignContent: alignContent, children: [
@@ -38392,7 +38401,7 @@ const Thead = ({
 };
 const TableRow = styled.tr.withConfig({
   componentId: "sc-1q458rb-3"
-})(["overflow:hidden;", " &:last-of-type{border-bottom:none;}@media (max-width:768px){position:relative;display:flex;flex-wrap:wrap;", "}"], ({
+})(["overflow:hidden;", " &:last-of-type,&:last-child{border-bottom:none;}@media (max-width:768px){position:relative;display:flex;flex-wrap:wrap;", "}"], ({
   theme: theme2,
   $isDeleted,
   $isDisabled,
@@ -38438,9 +38447,12 @@ const StyledColGroup = styled.colgroup.withConfig({
 })(["@media (max-width:768px){display:none;}"]);
 const StyledThead = styled.thead.withConfig({
   componentId: "sc-1q458rb-6"
-})(["tr{overflow:hidden;background-color:", ";}@media (max-width:768px){display:none;}"], ({
+})(["tr{overflow:hidden;background-color:", ";", "}@media (max-width:768px){display:none;}"], ({
+  theme: theme2
+}) => theme2.click.table.header.color.background.default, ({
   theme: theme2
-}) => theme2.click.table.header.color.background.default);
+}) => ` border-bottom: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.row.color.stroke.default};
+  `);
 const MobileHeader = styled.div.withConfig({
   componentId: "sc-1q458rb-7"
 })(["display:none;", " @media (max-width:768px){display:block;}"], ({
@@ -38487,7 +38499,12 @@ const ActionsContainer = styled.div.withConfig({
 })(["display:flex;flex-wrap:wrap;gap:0.5rem;overflow:hidden;@media (max-width:768px){flex-direction:column;overflow:auto;flex-wrap:nowrap;}"]);
 const TableWrapper = styled.div.withConfig({
   componentId: "sc-1q458rb-12"
-})(["width:100%;height:100%;overflow:auto;"]);
+})(["width:100%;height:100%;overflow:auto;", ""], ({
+  theme: theme2
+}) => `
+  border: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.global.color.stroke.default};
+  border-radius: ${theme2.click.table.radii.all}
+  `);
 const TableOuterContainer = styled.div.withConfig({
   componentId: "sc-1q458rb-13"
 })(["display:flex;flex-direction:column;gap:1rem;width:100%;"]);
@@ -38630,12 +38647,7 @@ const Table = forwardRef(({
 });
 const StyledTable = styled.table.withConfig({
   componentId: "sc-1q458rb-19"
-})(["width:100%;border-spacing:0;overflow:hidden;table-layout:fixed;", " @media (max-width:768px){border:none;table-layout:auto;}"], ({
-  theme: theme2
-}) => `
-    border-radius: ${theme2.click.table.radii.all};
-    border: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.global.color.stroke.default};
-  `);
+})(["width:100%;border-collapse:collapse;overflow:hidden;table-layout:fixed;@media (max-width:768px){border:none;table-layout:auto;}"]);
 const TextAreaField = forwardRef(({
   rows,
   disabled,

package/dist/click-ui.umd.js

@@ -10237,13 +10237,20 @@ var __publicField = (obj, key, value) => {
   const Content$3 = styled.div.withConfig({
     componentId: "sc-1drx130-2"
   })(["display:flex;flex-direction:column;flex:1;"]);
-  const InfoLink = styled.a.withConfig({
+  const CustomIcon = styled.img.withConfig({
     componentId: "sc-1drx130-3"
+  })(["height:", ";width:", ";"], ({
+    theme: theme2
+  }) => theme2.click.image.lg.size.height, ({
+    theme: theme2
+  }) => theme2.click.image.lg.size.width);
+  const InfoLink = styled.a.withConfig({
+    componentId: "sc-1drx130-4"
   })(["display:flex;align-items:center;color:", ";text-decoration:none;"], ({
     theme: theme2
   }) => theme2.click.card.secondary.color.link.default);
   const ArrowContainer = styled(SvgImage).withConfig({
-    componentId: "sc-1drx130-4"
+    componentId: "sc-1drx130-5"
   })(["color:", ";height:", ";width:", ";"], ({
     theme: theme2
   }) => theme2.click.card.secondary.color.link.default, ({
@@ -10252,13 +10259,13 @@ var __publicField = (obj, key, value) => {
     theme: theme2
   }) => theme2.click.image.md.size.width);
   const LinkText = styled(Text).withConfig({
-    componentId: "sc-1drx130-5"
+    componentId: "sc-1drx130-6"
   })([""]);
   const LinkArrow = styled(ArrowContainer).withConfig({
-    componentId: "sc-1drx130-6"
+    componentId: "sc-1drx130-7"
   })([""]);
   const Wrapper$a = styled.div.withConfig({
-    componentId: "sc-1drx130-7"
+    componentId: "sc-1drx130-8"
   })(["background-color:", ";border-radius:", ";border:", ";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,:focus{background-color:", ";cursor:pointer;", ",", "{color:", ';}}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}"], ({
     theme: theme2
   }) => theme2.click.card.secondary.color.background.default, ({
@@ -10292,6 +10299,7 @@ var __publicField = (obj, key, value) => {
   const CardSecondary = ({
     title,
     icon,
+    iconUrl,
     badgeState,
     badgeText = "",
     hasShadow = false,
@@ -10304,7 +10312,7 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$a, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$4, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderLeft, { $disabled: disabled, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "lg", "area-hidden": "" }),
+          iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(CustomIcon, { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true, size: "lg" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Title$2, { type: "h3", children: title })
         ] }),
         badgeText && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { text: badgeText, state: disabled == true ? "disabled" : badgeState })
@@ -10462,7 +10470,7 @@ var __publicField = (obj, key, value) => {
   }) => $isSelected ? `border-color: ${theme2.click.button.basic.color.primary.stroke.active};` : "");
   const Header$3 = styled.div.withConfig({
     componentId: "sc-2dguvi-1"
-  })(["display:flex;flex-direction:column;align-items:", ";gap:", ";h3{color:", ";}svg{height:", ";width:", ";}"], ({
+  })(["display:flex;flex-direction:column;align-items:", ";gap:", ";h3{color:", ";}svg,img{height:", ";width:", ";}"], ({
     $alignContent = "center"
   }) => ["start", "end"].includes($alignContent) ? `flex-${$alignContent}` : $alignContent, ({
     $size = "md",
@@ -10495,6 +10503,7 @@ var __publicField = (obj, key, value) => {
     alignContent,
     title,
     icon,
+    iconUrl,
     hasShadow = false,
     description,
     infoUrl,
@@ -10517,7 +10526,7 @@ var __publicField = (obj, key, value) => {
     const Component = !!infoUrl || typeof onButtonClick === "function" ? Button : "div";
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$8, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size2, "aria-disabled": disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
       (icon || title) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$3, { $size: size2, $disabled: disabled, $alignContent: alignContent, children: [
-        icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true }),
+        iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true }),
         title && /* @__PURE__ */ jsxRuntimeExports.jsx(Title$2, { type: "h3", children: title })
       ] }),
       (description || children) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Content$2, { $size: size2, $alignContent: alignContent, children: [
@@ -38409,7 +38418,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   };
   const TableRow = styled.tr.withConfig({
     componentId: "sc-1q458rb-3"
-  })(["overflow:hidden;", " &:last-of-type{border-bottom:none;}@media (max-width:768px){position:relative;display:flex;flex-wrap:wrap;", "}"], ({
+  })(["overflow:hidden;", " &:last-of-type,&:last-child{border-bottom:none;}@media (max-width:768px){position:relative;display:flex;flex-wrap:wrap;", "}"], ({
     theme: theme2,
     $isDeleted,
     $isDisabled,
@@ -38455,9 +38464,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   })(["@media (max-width:768px){display:none;}"]);
   const StyledThead = styled.thead.withConfig({
     componentId: "sc-1q458rb-6"
-  })(["tr{overflow:hidden;background-color:", ";}@media (max-width:768px){display:none;}"], ({
+  })(["tr{overflow:hidden;background-color:", ";", "}@media (max-width:768px){display:none;}"], ({
+    theme: theme2
+  }) => theme2.click.table.header.color.background.default, ({
     theme: theme2
-  }) => theme2.click.table.header.color.background.default);
+  }) => ` border-bottom: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.row.color.stroke.default};
+  `);
   const MobileHeader = styled.div.withConfig({
     componentId: "sc-1q458rb-7"
   })(["display:none;", " @media (max-width:768px){display:block;}"], ({
@@ -38504,7 +38516,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   })(["display:flex;flex-wrap:wrap;gap:0.5rem;overflow:hidden;@media (max-width:768px){flex-direction:column;overflow:auto;flex-wrap:nowrap;}"]);
   const TableWrapper = styled.div.withConfig({
     componentId: "sc-1q458rb-12"
-  })(["width:100%;height:100%;overflow:auto;"]);
+  })(["width:100%;height:100%;overflow:auto;", ""], ({
+    theme: theme2
+  }) => `
+  border: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.global.color.stroke.default};
+  border-radius: ${theme2.click.table.radii.all}
+  `);
   const TableOuterContainer = styled.div.withConfig({
     componentId: "sc-1q458rb-13"
   })(["display:flex;flex-direction:column;gap:1rem;width:100%;"]);
@@ -38647,12 +38664,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   });
   const StyledTable = styled.table.withConfig({
     componentId: "sc-1q458rb-19"
-  })(["width:100%;border-spacing:0;overflow:hidden;table-layout:fixed;", " @media (max-width:768px){border:none;table-layout:auto;}"], ({
-    theme: theme2
-  }) => `
-    border-radius: ${theme2.click.table.radii.all};
-    border: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.global.color.stroke.default};
-  `);
+  })(["width:100%;border-collapse:collapse;overflow:hidden;table-layout:fixed;@media (max-width:768px){border:none;table-layout:auto;}"]);
   const TextAreaField = React.forwardRef(({
     rows,
     disabled,

package/dist/components/CardPrimary/CardPrimary.d.ts

@@ -7,6 +7,7 @@ type ContentAlignment = "start" | "center" | "end";
 export interface CardPrimaryProps extends HTMLAttributes<HTMLDivElement>, WithTopBadgeProps {
     title?: string;
     icon?: IconName;
+    iconUrl?: string;
     hasShadow?: boolean;
     disabled?: boolean;
     description?: ReactNode;

package/dist/components/CardSecondary/CardSecondary.d.ts

@@ -4,7 +4,8 @@ import { HTMLAttributes, ReactNode } from 'react';
 export type BadgeState = "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info";
 export interface CardSecondaryProps extends HTMLAttributes<HTMLDivElement> {
     title: string;
-    icon: IconName;
+    icon?: IconName;
+    iconUrl?: string;
     badgeState?: BadgeState;
     hasShadow?: boolean;
     disabled?: boolean;
@@ -13,4 +14,4 @@ export interface CardSecondaryProps extends HTMLAttributes<HTMLDivElement> {
     infoUrl?: string;
     infoText?: string;
 }
-export declare const CardSecondary: ({ title, icon, badgeState, badgeText, hasShadow, disabled, description, infoUrl, infoText, ...props }: CardSecondaryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardSecondary: ({ title, icon, iconUrl, badgeState, badgeText, hasShadow, disabled, description, infoUrl, infoText, ...props }: CardSecondaryProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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