@clickhouse/click-ui 0.0.181 → 0.0.182

package/dist/click-ui.es.js

@@ -9959,7 +9959,7 @@ const Card = ({
 const CardPrimary = withTopBadge(Card);
 const Header$2 = styled.div.withConfig({
   componentId: "sc-1qnbjoa-0"
-})(["display:flex;flex-direction:column;align-items:start;width:100%;max-width:100%;gap:inherit;"]);
+})(["max-width:100%;gap:inherit;"]);
 const Description = styled.div.withConfig({
   componentId: "sc-1qnbjoa-1"
 })(["display:flex;flex-direction:column;align-self:start;gap:", ";flex:1;width:100%;"], ({
@@ -10043,12 +10043,19 @@ const CardHorizontal = ({
   isSelected,
   children,
   color = "default",
+  badgeText,
+  badgeState,
+  badgeIcon,
+  badgeIconDir,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs(Wrapper$7, { $disabled: disabled, $isSelected: isSelected, $color: color, tabIndex: 0, ...props, children: [
     icon && /* @__PURE__ */ jsx(CardIcon$1, { name: icon, "aria-hidden": true }),
     /* @__PURE__ */ jsxs(ContentWrapper, { children: [
-      title && /* @__PURE__ */ jsx(Header$2, { children: title }),
+      title && /* @__PURE__ */ jsxs(Header$2, { as: Container, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
+        /* @__PURE__ */ jsx(Container, { orientation: "horizontal", gap: "xs", isResponsive: false, fillWidth: false, grow: "1", children: title }),
+        badgeText && /* @__PURE__ */ jsx(Container, { isResponsive: false, justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-badge", children: /* @__PURE__ */ jsx(Badge, { text: badgeText, size: "md", state: badgeState, icon: badgeIcon, iconDir: badgeIconDir }) })
+      ] }),
       description && /* @__PURE__ */ jsx(Description, { children: description }),
       children && /* @__PURE__ */ jsx(Description, { children })
     ] })

package/dist/click-ui.umd.js

@@ -9975,7 +9975,7 @@ var __publicField = (obj, key, value) => {
   const CardPrimary = withTopBadge(Card);
   const Header$2 = styledComponents.styled.div.withConfig({
     componentId: "sc-1qnbjoa-0"
-  })(["display:flex;flex-direction:column;align-items:start;width:100%;max-width:100%;gap:inherit;"]);
+  })(["max-width:100%;gap:inherit;"]);
   const Description = styledComponents.styled.div.withConfig({
     componentId: "sc-1qnbjoa-1"
   })(["display:flex;flex-direction:column;align-self:start;gap:", ";flex:1;width:100%;"], ({
@@ -10059,12 +10059,19 @@ var __publicField = (obj, key, value) => {
     isSelected,
     children,
     color = "default",
+    badgeText,
+    badgeState,
+    badgeIcon,
+    badgeIconDir,
     ...props
   }) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$7, { $disabled: disabled, $isSelected: isSelected, $color: color, tabIndex: 0, ...props, children: [
       icon && /* @__PURE__ */ jsxRuntime.jsx(CardIcon$1, { name: icon, "aria-hidden": true }),
       /* @__PURE__ */ jsxRuntime.jsxs(ContentWrapper, { children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx(Header$2, { children: title }),
+        title && /* @__PURE__ */ jsxRuntime.jsxs(Header$2, { as: Container, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Container, { orientation: "horizontal", gap: "xs", isResponsive: false, fillWidth: false, grow: "1", children: title }),
+          badgeText && /* @__PURE__ */ jsxRuntime.jsx(Container, { isResponsive: false, justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { text: badgeText, size: "md", state: badgeState, icon: badgeIcon, iconDir: badgeIconDir }) })
+        ] }),
         description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description }),
         children && /* @__PURE__ */ jsxRuntime.jsx(Description, { children })
       ] })

package/dist/components/CardHorizontal/CardHorizontal.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { IconName } from '..';
+import { BadgeState, HorizontalDirection, IconName } from '..';
 
 type CardColor = "default" | "muted";
 export interface CardHorizontalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
@@ -10,6 +10,10 @@ export interface CardHorizontalProps extends Omit<HTMLAttributes<HTMLDivElement>
     isSelected?: boolean;
     children?: ReactNode;
     color?: CardColor;
+    badgeText?: string;
+    badgeState?: BadgeState;
+    badgeIcon?: IconName;
+    badgeIconDir?: HorizontalDirection;
 }
-export declare const CardHorizontal: ({ title, icon, description, disabled, isSelected, children, color, ...props }: CardHorizontalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardHorizontal: ({ title, icon, description, disabled, isSelected, children, color, badgeText, badgeState, badgeIcon, badgeIconDir, ...props }: CardHorizontalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

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