@clickhouse/click-ui 0.0.140 → 0.0.142

package/dist/click-ui.es.js

@@ -2281,7 +2281,7 @@ const FormElementContainer = styled.div.withConfig({
 })(["display:flex;flex-direction:column;align-items:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
   theme: theme2
 }) => theme2.click.field.space.gap);
-const EllipsisContainer$2 = styled.span.withConfig({
+styled.span.withConfig({
   componentId: "sc-1sddmxu-8"
 })(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-end;gap:inherit;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
 const FlagList = {
@@ -9903,7 +9903,7 @@ const SvgContainer = styled.svg.withConfig({
     height: ${theme2.click.badge.icon[$size].size.height};
     width: ${theme2.click.badge.icon[$size].size.width};
   `);
-const BadgeContent = styled(EllipsisContainer$2).withConfig({
+const BadgeContent = styled.div.withConfig({
   componentId: "sc-471xo0-3"
 })(["width:auto;overflow:hidden;svg{", "}"], ({
   $state = "default",
@@ -10291,6 +10291,26 @@ const CardSecondary = ({
     ] })
   ] });
 };
+const TopBadgeWrapper = styled.div.withConfig({
+  componentId: "sc-1d5pqpo-0"
+})(["position:relative;width:100%;max-width:100%;"]);
+const CardPrimaryTopBadge = styled(Badge).withConfig({
+  componentId: "sc-1d5pqpo-1"
+})(["position:absolute;top:0;left:50%;transform:translate(-50%,-50%);", " div:active + &{border-color:", ";}"], ({
+  $isSelected,
+  theme: theme2
+}) => $isSelected ? `border-color: ${theme2.click.button.basic.color.primary.stroke.active};` : "", ({
+  theme: theme2
+}) => theme2.click.button.basic.color.primary.stroke.active);
+const withTopBadge = (Component2) => ({
+  topBadgeText,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(TopBadgeWrapper, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Component2, { ...props }),
+    topBadgeText && /* @__PURE__ */ jsxRuntimeExports.jsx(CardPrimaryTopBadge, { "data-testid": "card-top-badge", text: topBadgeText, $isSelected: props.isSelected || false })
+  ] });
+};
 const Wrapper$9 = styled.div.withConfig({
   componentId: "sc-2dguvi-0"
 })(["background-color:", ";border-radius:", ";border:", ";display:flex;width:100%;max-width:100%;text-align:", ";flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,&:focus{background-color:", ";cursor:pointer;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}&:active{border-color:", ';}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}", ""], ({
@@ -10372,7 +10392,7 @@ const convertCardAlignToTextAlign = (align) => {
   }
   return align === "start" ? "left" : "right";
 };
-const CardPrimary = ({
+const Card = ({
   alignContent,
   title,
   icon,
@@ -10409,6 +10429,7 @@ const CardPrimary = ({
     infoText && /* @__PURE__ */ jsxRuntimeExports.jsx(Component2, { onClick: handleClick, disabled, children: infoText })
   ] });
 };
+const CardPrimary = withTopBadge(Card);
 const Header$2 = styled.div.withConfig({
   componentId: "sc-1qnbjoa-0"
 })(["display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;gap:inherit;"]);
@@ -37474,7 +37495,7 @@ const CollapsipleTrigger = ({
     }
     onOpenChange();
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsipleTriggerButton, { onClick, $indicatorDir: indicatorDir, ...props, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsipleTriggerButton, { onClick, $indicatorDir: indicatorDir, "aria-label": "trigger children", ...props, children: [
     indicatorDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { "data-trigger-icon": true, name: "chevron-right", "data-open": open2.toString(), size: "sm" }),
     children && /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper, { icon, iconDir, children }),
     indicatorDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { "data-trigger-icon": true, name: "chevron-right", "data-open": open2.toString(), size: "sm" })

package/dist/click-ui.umd.js

@@ -2298,7 +2298,7 @@ var __publicField = (obj, key, value) => {
   })(["display:flex;flex-direction:column;align-items:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
     theme: theme2
   }) => theme2.click.field.space.gap);
-  const EllipsisContainer$2 = styled.span.withConfig({
+  styled.span.withConfig({
     componentId: "sc-1sddmxu-8"
   })(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-end;gap:inherit;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
   const FlagList = {
@@ -9920,7 +9920,7 @@ var __publicField = (obj, key, value) => {
     height: ${theme2.click.badge.icon[$size].size.height};
     width: ${theme2.click.badge.icon[$size].size.width};
   `);
-  const BadgeContent = styled(EllipsisContainer$2).withConfig({
+  const BadgeContent = styled.div.withConfig({
     componentId: "sc-471xo0-3"
   })(["width:auto;overflow:hidden;svg{", "}"], ({
     $state = "default",
@@ -10308,6 +10308,26 @@ var __publicField = (obj, key, value) => {
       ] })
     ] });
   };
+  const TopBadgeWrapper = styled.div.withConfig({
+    componentId: "sc-1d5pqpo-0"
+  })(["position:relative;width:100%;max-width:100%;"]);
+  const CardPrimaryTopBadge = styled(Badge).withConfig({
+    componentId: "sc-1d5pqpo-1"
+  })(["position:absolute;top:0;left:50%;transform:translate(-50%,-50%);", " div:active + &{border-color:", ";}"], ({
+    $isSelected,
+    theme: theme2
+  }) => $isSelected ? `border-color: ${theme2.click.button.basic.color.primary.stroke.active};` : "", ({
+    theme: theme2
+  }) => theme2.click.button.basic.color.primary.stroke.active);
+  const withTopBadge = (Component) => ({
+    topBadgeText,
+    ...props
+  }) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(TopBadgeWrapper, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...props }),
+      topBadgeText && /* @__PURE__ */ jsxRuntimeExports.jsx(CardPrimaryTopBadge, { "data-testid": "card-top-badge", text: topBadgeText, $isSelected: props.isSelected || false })
+    ] });
+  };
   const Wrapper$9 = styled.div.withConfig({
     componentId: "sc-2dguvi-0"
   })(["background-color:", ";border-radius:", ";border:", ";display:flex;width:100%;max-width:100%;text-align:", ";flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,&:focus{background-color:", ";cursor:pointer;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}&:active{border-color:", ';}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}", ""], ({
@@ -10389,7 +10409,7 @@ var __publicField = (obj, key, value) => {
     }
     return align === "start" ? "left" : "right";
   };
-  const CardPrimary = ({
+  const Card = ({
     alignContent,
     title,
     icon,
@@ -10426,6 +10446,7 @@ var __publicField = (obj, key, value) => {
       infoText && /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { onClick: handleClick, disabled, children: infoText })
     ] });
   };
+  const CardPrimary = withTopBadge(Card);
   const Header$2 = styled.div.withConfig({
     componentId: "sc-1qnbjoa-0"
   })(["display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;gap:inherit;"]);
@@ -37491,7 +37512,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       }
       onOpenChange();
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsipleTriggerButton, { onClick, $indicatorDir: indicatorDir, ...props, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsipleTriggerButton, { onClick, $indicatorDir: indicatorDir, "aria-label": "trigger children", ...props, children: [
       indicatorDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { "data-trigger-icon": true, name: "chevron-right", "data-open": open2.toString(), size: "sm" }),
       children && /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper, { icon, iconDir, children }),
       indicatorDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { "data-trigger-icon": true, name: "chevron-right", "data-open": open2.toString(), size: "sm" })

package/dist/components/Badge/Badge.d.ts

@@ -1,5 +1,6 @@
-import { HorizontalDirection, IconName } from '..';
+import { HorizontalDirection } from '..';
 import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { IconName } from '../Icon/types';
 
 export type BadgeState = "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info";
 export type BadgeSize = "sm" | "md";

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

@@ -1,9 +1,10 @@
 import { IconName } from '..';
 import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { WithTopBadgeProps } from './withTopBadge';
 
 export type CardPrimarySize = "sm" | "md";
 type ContentAlignment = "start" | "center" | "end";
-export interface CardPrimaryProps extends HTMLAttributes<HTMLDivElement> {
+export interface CardPrimaryProps extends HTMLAttributes<HTMLDivElement>, WithTopBadgeProps {
     title?: string;
     icon?: IconName;
     hasShadow?: boolean;
@@ -17,5 +18,5 @@ export interface CardPrimaryProps extends HTMLAttributes<HTMLDivElement> {
     alignContent?: ContentAlignment;
     onButtonClick?: MouseEventHandler<HTMLElement>;
 }
-export declare const CardPrimary: ({ alignContent, title, icon, hasShadow, description, infoUrl, infoText, size, disabled, onButtonClick, isSelected, children, ...props }: CardPrimaryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardPrimary: import('react').FC<CardPrimaryProps & WithTopBadgeProps>;
 export {};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const TopBadgeWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardPrimaryTopBadge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Badge/Badge').DismissibleBadge | import('../Badge/Badge').NonDismissibleBadge, {
+    $isSelected?: boolean | undefined;
+}>> & string & Omit<({ icon, iconDir, text, state, size, dismissible, onClose, ...props }: import('../Badge/Badge').BadgeProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;

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

@@ -0,0 +1,7 @@
+import { ComponentType, FC } from 'react';
+
+export interface WithTopBadgeProps {
+    topBadgeText?: string;
+    isSelected?: boolean;
+}
+export declare const withTopBadge: <P extends object>(Component: ComponentType<P>) => FC<P & WithTopBadgeProps>;

package/package.json

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