@clickhouse/click-ui 0.0.143 → 0.0.145

package/dist/click-ui.es.js

@@ -8932,21 +8932,26 @@ const Accordion = ({
   children,
   fillWidth = false,
   ...delegated
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, className: "asasas", ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionRoot, { type: "single", collapsible: true, $fillWidth: fillWidth, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
   /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, $fillWidth: fillWidth, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize || size2, "aria-label": "accordion icon" }) }),
       icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize || size2 }) : null
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "div", size: size2, children: title })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "div", size: size2, fillWidth, children: title })
   ] }),
   /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
     children
   ] })
 ] }) });
-const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+const AccordionRoot = styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
   componentId: "sc-1ysh219-0"
+})(["", ";"], ({
+  $fillWidth
+}) => $fillWidth && "width: 100%");
+const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+  componentId: "sc-1ysh219-1"
 })(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", " ", ";"], ({
   theme: theme2,
   $size = "md",
@@ -8970,21 +8975,21 @@ const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withC
   $fillWidth
 }) => $fillWidth && "width: 100%");
 const AccordionIconWrapper = styled.div.withConfig({
-  componentId: "sc-1ysh219-1"
+  componentId: "sc-1ysh219-2"
 })(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
 const AccordionIconsWrapper = styled.div.withConfig({
-  componentId: "sc-1ysh219-2"
+  componentId: "sc-1ysh219-3"
 })(["display:flex;align-items:center;justify-content:center;"]);
 const AccordionContent = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
-  componentId: "sc-1ysh219-3"
+  componentId: "sc-1ysh219-4"
 })([""]);
 styled(Accordion).withConfig({
-  componentId: "sc-1ysh219-4"
+  componentId: "sc-1ysh219-5"
 })(["", "{gap:", ";}p{margin:0;}", "{visibility:hidden;}&:hover ", "{visibility:revert;}&:active ", "{visibility:revert;}", "[data-state='open'] ", "{visibility:revert;}"], AccordionTrigger, ({
   theme: theme2
 }) => theme2.click.sidebar.navigation.item.default.space.gap, AccordionIconWrapper, AccordionIconWrapper, AccordionIconWrapper, AccordionTrigger, AccordionIconWrapper);
 const AccordionToExport = styled(Accordion).withConfig({
-  componentId: "sc-1ysh219-5"
+  componentId: "sc-1ysh219-6"
 })([""]);
 const stateIconMap = {
   neutral: "information",
@@ -10182,11 +10187,12 @@ const _Text = ({
   className,
   children,
   component,
+  fillWidth,
   ...props
-}, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(CuiText, { as: component ?? "p", ref, $align: align, $color: color, $size: size2, $weight: weight, className, ...props, children });
+}, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(CuiText, { as: component ?? "p", ref, $align: align, $color: color, $size: size2, $weight: weight, $fillWidth: fillWidth, className, ...props, children });
 const CuiText = styled.p.withConfig({
   componentId: "sc-6r74pj-0"
-})(["font:", ";color:", ";text-align:", ";margin:0;"], ({
+})(["font:", ";color:", ";text-align:", ";margin:0;", ";"], ({
   $size = "md",
   $weight = "normal",
   theme: theme2
@@ -10195,7 +10201,9 @@ const CuiText = styled.p.withConfig({
   theme: theme2
 }) => theme2.click.global.color.text[$color], ({
   $align = "left"
-}) => $align);
+}) => $align, ({
+  $fillWidth
+}) => $fillWidth && "width: 100%");
 _Text.displayName = "Text";
 const Text = forwardRef(_Text);
 const Header$4 = styled.div.withConfig({
@@ -37414,7 +37422,7 @@ const NavContext = createContext({
 });
 const CollapsibleContainer = styled.div.withConfig({
   componentId: "sc-guwmyz-0"
-})(['width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
+})(['width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}[data-collapsible-header]:hover [data-trigger-icon]{visibility:visible;}']);
 const Collapsible = ({
   open: openProp,
   onOpenChange: onOpenChangeProp,
@@ -37464,7 +37472,7 @@ const CollapsipleHeader = forwardRef(({
     if (typeof onClickProp === "function") {
       onClickProp(e);
     }
-  }, ...props, children: [
+  }, "data-collapsible-header": true, ...props, children: [
     indicatorDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible.Trigger, {}),
     children && /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper, { icon, iconDir, children }),
     indicatorDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible.Trigger, {})

package/dist/click-ui.umd.js

@@ -8949,21 +8949,26 @@ var __publicField = (obj, key, value) => {
     children,
     fillWidth = false,
     ...delegated
-  }) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, className: "asasas", ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
+  }) => /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionRoot, { type: "single", collapsible: true, $fillWidth: fillWidth, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, $fillWidth: fillWidth, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize || size2, "aria-label": "accordion icon" }) }),
         icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize || size2 }) : null
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "div", size: size2, children: title })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "div", size: size2, fillWidth, children: title })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
       children
     ] })
   ] }) });
-  const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+  const AccordionRoot = styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-1ysh219-0"
+  })(["", ";"], ({
+    $fillWidth
+  }) => $fillWidth && "width: 100%");
+  const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+    componentId: "sc-1ysh219-1"
   })(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", " ", ";"], ({
     theme: theme2,
     $size = "md",
@@ -8987,21 +8992,21 @@ var __publicField = (obj, key, value) => {
     $fillWidth
   }) => $fillWidth && "width: 100%");
   const AccordionIconWrapper = styled.div.withConfig({
-    componentId: "sc-1ysh219-1"
+    componentId: "sc-1ysh219-2"
   })(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
   const AccordionIconsWrapper = styled.div.withConfig({
-    componentId: "sc-1ysh219-2"
+    componentId: "sc-1ysh219-3"
   })(["display:flex;align-items:center;justify-content:center;"]);
   const AccordionContent = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
-    componentId: "sc-1ysh219-3"
+    componentId: "sc-1ysh219-4"
   })([""]);
   styled(Accordion).withConfig({
-    componentId: "sc-1ysh219-4"
+    componentId: "sc-1ysh219-5"
   })(["", "{gap:", ";}p{margin:0;}", "{visibility:hidden;}&:hover ", "{visibility:revert;}&:active ", "{visibility:revert;}", "[data-state='open'] ", "{visibility:revert;}"], AccordionTrigger, ({
     theme: theme2
   }) => theme2.click.sidebar.navigation.item.default.space.gap, AccordionIconWrapper, AccordionIconWrapper, AccordionIconWrapper, AccordionTrigger, AccordionIconWrapper);
   const AccordionToExport = styled(Accordion).withConfig({
-    componentId: "sc-1ysh219-5"
+    componentId: "sc-1ysh219-6"
   })([""]);
   const stateIconMap = {
     neutral: "information",
@@ -10199,11 +10204,12 @@ var __publicField = (obj, key, value) => {
     className,
     children,
     component,
+    fillWidth,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(CuiText, { as: component ?? "p", ref, $align: align, $color: color, $size: size2, $weight: weight, className, ...props, children });
+  }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(CuiText, { as: component ?? "p", ref, $align: align, $color: color, $size: size2, $weight: weight, $fillWidth: fillWidth, className, ...props, children });
   const CuiText = styled.p.withConfig({
     componentId: "sc-6r74pj-0"
-  })(["font:", ";color:", ";text-align:", ";margin:0;"], ({
+  })(["font:", ";color:", ";text-align:", ";margin:0;", ";"], ({
     $size = "md",
     $weight = "normal",
     theme: theme2
@@ -10212,7 +10218,9 @@ var __publicField = (obj, key, value) => {
     theme: theme2
   }) => theme2.click.global.color.text[$color], ({
     $align = "left"
-  }) => $align);
+  }) => $align, ({
+    $fillWidth
+  }) => $fillWidth && "width: 100%");
   _Text.displayName = "Text";
   const Text = React.forwardRef(_Text);
   const Header$4 = styled.div.withConfig({
@@ -37431,7 +37439,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   });
   const CollapsibleContainer = styled.div.withConfig({
     componentId: "sc-guwmyz-0"
-  })(['width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
+  })(['width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}[data-collapsible-header]:hover [data-trigger-icon]{visibility:visible;}']);
   const Collapsible = ({
     open: openProp,
     onOpenChange: onOpenChangeProp,
@@ -37481,7 +37489,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       if (typeof onClickProp === "function") {
         onClickProp(e);
       }
-    }, ...props, children: [
+    }, "data-collapsible-header": true, ...props, children: [
       indicatorDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible.Trigger, {}),
       children && /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper, { icon, iconDir, children }),
       indicatorDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible.Trigger, {})

package/dist/components/Accordion/Accordion.d.ts

@@ -1,12 +1,12 @@
 import { IconSize } from '../Icon/types';
 import { IconName } from '..';
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import * as RadixAccordion from "@radix-ui/react-accordion";
 type Size = "sm" | "md" | "lg";
 type Gap = "sm" | "md" | "lg";
 type Color = "default" | "link";
-export interface AccordionProps extends SizeProp, Omit<RadixAccordion.AccordionSingleProps, "type" | "collapsible"> {
-    title: string;
+export interface AccordionProps extends SizeProp, Omit<RadixAccordion.AccordionSingleProps, "type" | "collapsible" | "title"> {
+    title: ReactNode;
     color?: Color;
     icon?: IconName;
     iconSize?: IconSize;

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

@@ -1,6 +1,6 @@
 import { HorizontalDirection } from '..';
 import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
-import { IconName } from '../Icon/types';
+import { ImageName } from '../Icon/types';
 
 export type BadgeState = "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info";
 export type BadgeSize = "sm" | "md";
@@ -8,7 +8,7 @@ export interface CommonBadgeProps extends HTMLAttributes<HTMLDivElement> {
     text: ReactNode;
     state?: BadgeState;
     size?: BadgeSize;
-    icon?: IconName;
+    icon?: ImageName;
     iconDir?: HorizontalDirection;
 }
 export interface DismissibleBadge extends CommonBadgeProps {

package/dist/components/Typography/Text/Text.d.ts

@@ -12,6 +12,7 @@ export interface TextProps<T extends ElementType = "p"> {
     weight?: TextWeight;
     className?: string;
     component?: T;
+    fillWidth?: boolean;
 }
 type TextPolymorphicComponent = <T extends ElementType = "p">(props: Omit<ComponentProps<T>, keyof T> & TextProps<T>) => ReactNode;
 declare const Text: TextPolymorphicComponent;

package/package.json

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