@clickhouse/click-ui 0.0.164 → 0.0.165

package/dist/click-ui.es.js

@@ -4277,14 +4277,13 @@ let $1746a345f3d73bb7$var$count = 0;
 function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
   const [id, setId] = React.useState($1746a345f3d73bb7$var$useReactId());
   $9f79659886946c16$export$e5c5a5f917a5871c(() => {
-    if (!deterministicId)
-      setId(
-        (reactId) => reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++)
-      );
+    setId(
+      (reactId) => reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++)
+    );
   }, [
     deterministicId
   ]);
-  return deterministicId || (id ? `radix-${id}` : "");
+  return id ? `radix-${id}` : "";
 }
 const sides = ["top", "right", "bottom", "left"];
 const min = Math.min;
@@ -9086,25 +9085,25 @@ const Accordion = ({
   children,
   fillWidth = false,
   ...delegated
-}) => /* @__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" }) }),
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionRoot$1, { type: "single", collapsible: true, $fillWidth: fillWidth, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger$1, { $size: size2, color, $fillWidth: fillWidth, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper$1, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper$1, { 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, fillWidth, children: title })
   ] }),
-  /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent$1, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
     children
   ] })
 ] }) });
-const AccordionRoot = styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
+const AccordionRoot$1 = styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
   componentId: "sc-1ysh219-0"
 })(["", ";"], ({
   $fillWidth
 }) => $fillWidth && "width: 100%");
-const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+const AccordionTrigger$1 = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
   componentId: "sc-1ysh219-1"
 })(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", " ", ";"], ({
   theme: theme2,
@@ -9128,20 +9127,20 @@ const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withC
   `, ({
   $fillWidth
 }) => $fillWidth && "width: 100%");
-const AccordionIconWrapper = styled.div.withConfig({
+const AccordionIconWrapper$1 = styled.div.withConfig({
   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({
+})(["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$1);
+const AccordionIconsWrapper$1 = styled.div.withConfig({
   componentId: "sc-1ysh219-3"
 })(["display:flex;align-items:center;justify-content:center;"]);
-const AccordionContent = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
+const AccordionContent$1 = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
   componentId: "sc-1ysh219-4"
 })([""]);
 styled(Accordion).withConfig({
   componentId: "sc-1ysh219-5"
-})(["", "{gap:", ";}p{margin:0;}", "{visibility:hidden;}&:hover ", "{visibility:revert;}&:active ", "{visibility:revert;}", "[data-state='open'] ", "{visibility:revert;}"], AccordionTrigger, ({
+})(["", "{gap:", ";}p{margin:0;}", "{visibility:hidden;}&:hover ", "{visibility:revert;}&:active ", "{visibility:revert;}", "[data-state='open'] ", "{visibility:revert;}"], AccordionTrigger$1, ({
   theme: theme2
-}) => theme2.click.sidebar.navigation.item.default.space.gap, AccordionIconWrapper, AccordionIconWrapper, AccordionIconWrapper, AccordionTrigger, AccordionIconWrapper);
+}) => theme2.click.sidebar.navigation.item.default.space.gap, AccordionIconWrapper$1, AccordionIconWrapper$1, AccordionIconWrapper$1, AccordionTrigger$1, AccordionIconWrapper$1);
 const AccordionToExport = styled(Accordion).withConfig({
   componentId: "sc-1ysh219-6"
 })([""]);
@@ -10393,7 +10392,7 @@ const HeaderLeft = styled.div.withConfig({
 const Content$3 = styled.div.withConfig({
   componentId: "sc-1drx130-2"
 })(["display:flex;flex-direction:column;flex:1;"]);
-const CustomIcon = styled.img.withConfig({
+const CustomIcon$1 = styled.img.withConfig({
   componentId: "sc-1drx130-3"
 })(["height:", ";width:", ";"], ({
   theme: theme2
@@ -10472,7 +10471,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: [
-        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" }),
+        iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(CustomIcon$1, { 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 })
@@ -44247,7 +44246,7 @@ const click$1 = {
   field: {
     color: {
       background: {
-        "default": "rgb(96.6% 96.9% 98.1%)",
+        "default": "rgb(98.5% 98.9% 100%)",
         hover: "rgb(96.6% 96.9% 98.1%)",
         active: "#ffffff",
         disabled: "#dfdfdf",
@@ -46335,7 +46334,7 @@ const click = {
     },
     color: {
       background: {
-        "default": "rgb(96.6% 96.9% 98.1%)",
+        "default": "rgb(98.5% 98.9% 100%)",
         hover: "rgb(96.6% 96.9% 98.1%)",
         active: "#ffffff",
         disabled: "#dfdfdf",
@@ -47984,6 +47983,7 @@ const palette = {
     base: "#212121"
   },
   slate: {
+    "25": "#FBFCFF",
     "50": "#f6f7fa",
     "100": "#e6e7e9",
     "200": "#cccfd3",
@@ -48459,6 +48459,153 @@ const VerticalStep = ({
 };
 VerticalStep.displayName = "VerticalStepper.Step";
 VerticalStepper.Step = VerticalStep;
+const MultiAccordionContext = createContext({
+  size: "md",
+  fillWidth: true,
+  showBorder: true,
+  showCheck: false
+});
+const MultiAccordion = ({
+  size: size2 = "md",
+  children,
+  fillWidth = true,
+  showCheck = false,
+  showBorder = true,
+  gap = "md",
+  markAsCompleted,
+  ...delegated
+}) => {
+  const contextValue = {
+    size: size2,
+    fillWidth,
+    showBorder,
+    showCheck,
+    markAsCompleted
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionRoot, { $fillWidth: fillWidth, $gap: gap, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MultiAccordionContext.Provider, { value: contextValue, children }) });
+};
+const MultiAccordionItem = ({
+  value,
+  title,
+  color,
+  icon,
+  iconSize,
+  gap,
+  children,
+  isCompleted = false,
+  ...props
+}) => {
+  const {
+    fillWidth,
+    size: size2,
+    showBorder,
+    showCheck,
+    markAsCompleted
+  } = useContext(MultiAccordionContext);
+  const onClickStatus = (e) => {
+    e.preventDefault();
+    if (typeof markAsCompleted === "function") {
+      markAsCompleted(value);
+    }
+  };
+  const customSize = size2 === "none" ? "sm" : size2;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value, $showBorder: showBorder, $fillWidth: fillWidth, ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
+        icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize ?? customSize }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "span", size: customSize, fillWidth, children: title }),
+        showCheck && /* @__PURE__ */ jsxRuntimeExports.jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { $padding: size2, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
+      children
+    ] })
+  ] });
+};
+MultiAccordionItem.displayName = "MultiAccordion.Item";
+MultiAccordion.Item = MultiAccordionItem;
+const AccordionRoot = styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
+  componentId: "sc-1lb3204-0"
+})(["display:flex;flex-direction:column;justify-content:start;align-items:start;gap:", ";", ";"], ({
+  theme: theme2,
+  $gap
+}) => theme2.click.container.gap[$gap], ({
+  $fillWidth
+}) => $fillWidth && "width: 100%");
+const AccordionItem = styled($1bf158f521e1b1b4$export$6d08773d2e66f8f2).withConfig({
+  componentId: "sc-1lb3204-1"
+})(["", ";", ";"], ({
+  theme: theme2,
+  $showBorder
+}) => `
+    border: ${$showBorder ? `1px solid ${theme2.click.global.color.stroke.default}` : "none"};
+    border-radius: ${theme2.border.radii[1]};
+  `, ({
+  $fillWidth
+}) => $fillWidth && "width: 100%");
+const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+  componentId: "sc-1lb3204-2"
+})(["width:100%;border:none;padding:0;background-color:transparent;display:flex;align-items:center;", ';border-radius:inherit;&[data-state="open"]{border-bottom-left-radius:0px;border-bottom-right-radius:0px;[data-icon="accordion-status"]{color:', ";}}"], ({
+  theme: theme2,
+  $size = "md",
+  color = "default"
+}) => {
+  const size2 = $size === "none" ? "sm" : $size;
+  return `
+    padding: ${theme2.click.container.space[$size]};
+    gap: ${theme2.click.accordion[size2].space.gap};
+    color: ${theme2.click.accordion.color[color].label.default};
+    font: ${theme2.click.accordion[size2].typography.label.default};
+
+    &:active {
+      color: ${theme2.click.accordion.color[color].label.active};
+      font: ${theme2.click.accordion[size2].typography.label.active};
+    }
+
+    &:hover {
+      color: ${theme2.click.accordion.color[color].label.hover};
+      background: ${theme2.click.global.color.stroke.default};
+      font: ${theme2.click.accordion[size2].typography.label.hover};
+      cursor: pointer;
+    }
+
+  [data-icon="accordion-status"] {
+    color: ${theme2.global.color.stroke.intense};
+  }
+  `;
+}, ({
+  theme: theme2
+}) => theme2.global.color.accent.default);
+const AccordionIconWrapper = styled.div.withConfig({
+  componentId: "sc-1lb3204-3"
+})(["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-1lb3204-4"
+})(["display:flex;align-items:center;justify-content:center;"]);
+const CustomIcon = styled(SvgImage).withConfig({
+  componentId: "sc-1lb3204-5"
+})(["", ""], ({
+  $isCompleted,
+  theme: theme2
+}) => $isCompleted && `
+        svg path {
+          stroke: ${theme2.global.color.background.default} !important;
+          &:first-of-type {
+            stroke: ${theme2.global.color.accent.default} !important;
+          }
+          fill: ${theme2.global.color.accent.default} !important;;
+        }
+      `);
+const AccordionContent = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
+  componentId: "sc-1lb3204-6"
+})(["padding:", ";padding-top:0;"], ({
+  theme: theme2,
+  $padding
+}) => theme2.click.container.space[$padding]);
 export {
   AccordionToExport as Accordion,
   Alert,
@@ -48500,6 +48647,7 @@ export {
   Label$1 as Label,
   Link,
   Logo,
+  MultiAccordion,
   MultiSelect,
   NumberField,
   Pagination,

package/dist/click-ui.umd.js

@@ -4294,14 +4294,13 @@ var __publicField = (obj, key, value) => {
   function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
     const [id, setId] = React__namespace.useState($1746a345f3d73bb7$var$useReactId());
     $9f79659886946c16$export$e5c5a5f917a5871c(() => {
-      if (!deterministicId)
-        setId(
-          (reactId) => reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++)
-        );
+      setId(
+        (reactId) => reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++)
+      );
     }, [
       deterministicId
     ]);
-    return deterministicId || (id ? `radix-${id}` : "");
+    return id ? `radix-${id}` : "";
   }
   const sides = ["top", "right", "bottom", "left"];
   const min = Math.min;
@@ -9103,25 +9102,25 @@ var __publicField = (obj, key, value) => {
     children,
     fillWidth = false,
     ...delegated
-  }) => /* @__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" }) }),
+  }) => /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionRoot$1, { type: "single", collapsible: true, $fillWidth: fillWidth, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger$1, { $size: size2, color, $fillWidth: fillWidth, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper$1, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper$1, { 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, fillWidth, children: title })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent$1, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
       children
     ] })
   ] }) });
-  const AccordionRoot = styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
+  const AccordionRoot$1 = styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-1ysh219-0"
   })(["", ";"], ({
     $fillWidth
   }) => $fillWidth && "width: 100%");
-  const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+  const AccordionTrigger$1 = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
     componentId: "sc-1ysh219-1"
   })(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", " ", ";"], ({
     theme: theme2,
@@ -9145,20 +9144,20 @@ var __publicField = (obj, key, value) => {
   `, ({
     $fillWidth
   }) => $fillWidth && "width: 100%");
-  const AccordionIconWrapper = styled.div.withConfig({
+  const AccordionIconWrapper$1 = styled.div.withConfig({
     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({
+  })(["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$1);
+  const AccordionIconsWrapper$1 = styled.div.withConfig({
     componentId: "sc-1ysh219-3"
   })(["display:flex;align-items:center;justify-content:center;"]);
-  const AccordionContent = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
+  const AccordionContent$1 = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-1ysh219-4"
   })([""]);
   styled(Accordion).withConfig({
     componentId: "sc-1ysh219-5"
-  })(["", "{gap:", ";}p{margin:0;}", "{visibility:hidden;}&:hover ", "{visibility:revert;}&:active ", "{visibility:revert;}", "[data-state='open'] ", "{visibility:revert;}"], AccordionTrigger, ({
+  })(["", "{gap:", ";}p{margin:0;}", "{visibility:hidden;}&:hover ", "{visibility:revert;}&:active ", "{visibility:revert;}", "[data-state='open'] ", "{visibility:revert;}"], AccordionTrigger$1, ({
     theme: theme2
-  }) => theme2.click.sidebar.navigation.item.default.space.gap, AccordionIconWrapper, AccordionIconWrapper, AccordionIconWrapper, AccordionTrigger, AccordionIconWrapper);
+  }) => theme2.click.sidebar.navigation.item.default.space.gap, AccordionIconWrapper$1, AccordionIconWrapper$1, AccordionIconWrapper$1, AccordionTrigger$1, AccordionIconWrapper$1);
   const AccordionToExport = styled(Accordion).withConfig({
     componentId: "sc-1ysh219-6"
   })([""]);
@@ -10410,7 +10409,7 @@ var __publicField = (obj, key, value) => {
   const Content$3 = styled.div.withConfig({
     componentId: "sc-1drx130-2"
   })(["display:flex;flex-direction:column;flex:1;"]);
-  const CustomIcon = styled.img.withConfig({
+  const CustomIcon$1 = styled.img.withConfig({
     componentId: "sc-1drx130-3"
   })(["height:", ";width:", ";"], ({
     theme: theme2
@@ -10489,7 +10488,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: [
-          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" }),
+          iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(CustomIcon$1, { 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 })
@@ -44264,7 +44263,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     field: {
       color: {
         background: {
-          "default": "rgb(96.6% 96.9% 98.1%)",
+          "default": "rgb(98.5% 98.9% 100%)",
           hover: "rgb(96.6% 96.9% 98.1%)",
           active: "#ffffff",
           disabled: "#dfdfdf",
@@ -46352,7 +46351,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       },
       color: {
         background: {
-          "default": "rgb(96.6% 96.9% 98.1%)",
+          "default": "rgb(98.5% 98.9% 100%)",
           hover: "rgb(96.6% 96.9% 98.1%)",
           active: "#ffffff",
           disabled: "#dfdfdf",
@@ -48001,6 +48000,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       base: "#212121"
     },
     slate: {
+      "25": "#FBFCFF",
       "50": "#f6f7fa",
       "100": "#e6e7e9",
       "200": "#cccfd3",
@@ -48476,6 +48476,153 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   };
   VerticalStep.displayName = "VerticalStepper.Step";
   VerticalStepper.Step = VerticalStep;
+  const MultiAccordionContext = React.createContext({
+    size: "md",
+    fillWidth: true,
+    showBorder: true,
+    showCheck: false
+  });
+  const MultiAccordion = ({
+    size: size2 = "md",
+    children,
+    fillWidth = true,
+    showCheck = false,
+    showBorder = true,
+    gap = "md",
+    markAsCompleted,
+    ...delegated
+  }) => {
+    const contextValue = {
+      size: size2,
+      fillWidth,
+      showBorder,
+      showCheck,
+      markAsCompleted
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionRoot, { $fillWidth: fillWidth, $gap: gap, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MultiAccordionContext.Provider, { value: contextValue, children }) });
+  };
+  const MultiAccordionItem = ({
+    value,
+    title,
+    color,
+    icon,
+    iconSize,
+    gap,
+    children,
+    isCompleted = false,
+    ...props
+  }) => {
+    const {
+      fillWidth,
+      size: size2,
+      showBorder,
+      showCheck,
+      markAsCompleted
+    } = React.useContext(MultiAccordionContext);
+    const onClickStatus = (e) => {
+      e.preventDefault();
+      if (typeof markAsCompleted === "function") {
+        markAsCompleted(value);
+      }
+    };
+    const customSize = size2 === "none" ? "sm" : size2;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value, $showBorder: showBorder, $fillWidth: fillWidth, ...props, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
+          icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize ?? customSize }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "span", size: customSize, fillWidth, children: title }),
+          showCheck && /* @__PURE__ */ jsxRuntimeExports.jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { $padding: size2, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
+        children
+      ] })
+    ] });
+  };
+  MultiAccordionItem.displayName = "MultiAccordion.Item";
+  MultiAccordion.Item = MultiAccordionItem;
+  const AccordionRoot = styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
+    componentId: "sc-1lb3204-0"
+  })(["display:flex;flex-direction:column;justify-content:start;align-items:start;gap:", ";", ";"], ({
+    theme: theme2,
+    $gap
+  }) => theme2.click.container.gap[$gap], ({
+    $fillWidth
+  }) => $fillWidth && "width: 100%");
+  const AccordionItem = styled($1bf158f521e1b1b4$export$6d08773d2e66f8f2).withConfig({
+    componentId: "sc-1lb3204-1"
+  })(["", ";", ";"], ({
+    theme: theme2,
+    $showBorder
+  }) => `
+    border: ${$showBorder ? `1px solid ${theme2.click.global.color.stroke.default}` : "none"};
+    border-radius: ${theme2.border.radii[1]};
+  `, ({
+    $fillWidth
+  }) => $fillWidth && "width: 100%");
+  const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+    componentId: "sc-1lb3204-2"
+  })(["width:100%;border:none;padding:0;background-color:transparent;display:flex;align-items:center;", ';border-radius:inherit;&[data-state="open"]{border-bottom-left-radius:0px;border-bottom-right-radius:0px;[data-icon="accordion-status"]{color:', ";}}"], ({
+    theme: theme2,
+    $size = "md",
+    color = "default"
+  }) => {
+    const size2 = $size === "none" ? "sm" : $size;
+    return `
+    padding: ${theme2.click.container.space[$size]};
+    gap: ${theme2.click.accordion[size2].space.gap};
+    color: ${theme2.click.accordion.color[color].label.default};
+    font: ${theme2.click.accordion[size2].typography.label.default};
+
+    &:active {
+      color: ${theme2.click.accordion.color[color].label.active};
+      font: ${theme2.click.accordion[size2].typography.label.active};
+    }
+
+    &:hover {
+      color: ${theme2.click.accordion.color[color].label.hover};
+      background: ${theme2.click.global.color.stroke.default};
+      font: ${theme2.click.accordion[size2].typography.label.hover};
+      cursor: pointer;
+    }
+
+  [data-icon="accordion-status"] {
+    color: ${theme2.global.color.stroke.intense};
+  }
+  `;
+  }, ({
+    theme: theme2
+  }) => theme2.global.color.accent.default);
+  const AccordionIconWrapper = styled.div.withConfig({
+    componentId: "sc-1lb3204-3"
+  })(["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-1lb3204-4"
+  })(["display:flex;align-items:center;justify-content:center;"]);
+  const CustomIcon = styled(SvgImage).withConfig({
+    componentId: "sc-1lb3204-5"
+  })(["", ""], ({
+    $isCompleted,
+    theme: theme2
+  }) => $isCompleted && `
+        svg path {
+          stroke: ${theme2.global.color.background.default} !important;
+          &:first-of-type {
+            stroke: ${theme2.global.color.accent.default} !important;
+          }
+          fill: ${theme2.global.color.accent.default} !important;;
+        }
+      `);
+  const AccordionContent = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
+    componentId: "sc-1lb3204-6"
+  })(["padding:", ";padding-top:0;"], ({
+    theme: theme2,
+    $padding
+  }) => theme2.click.container.space[$padding]);
   exports2.Accordion = AccordionToExport;
   exports2.Alert = Alert;
   exports2.AutoComplete = AutoComplete;
@@ -48516,6 +48663,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.Label = Label$1;
   exports2.Link = Link;
   exports2.Logo = Logo;
+  exports2.MultiAccordion = MultiAccordion;
   exports2.MultiSelect = MultiSelect;
   exports2.NumberField = NumberField;
   exports2.Pagination = Pagination;

package/dist/components/Container/Container.d.ts

@@ -2,10 +2,10 @@ import { ComponentProps, ElementType, ReactNode } from 'react';
 import { Orientation } from '..';
 
 type AlignItemsOptions = "start" | "center" | "end" | "stretch";
-type GapOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type GapOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 type GrowShrinkOptions = "0" | "1" | "2" | "3" | "4" | "5" | "6";
 type JustifyContentOptions = "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end" | "left" | "right";
-type PaddingOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type PaddingOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 type WrapOptions = "nowrap" | "wrap" | "wrap-reverse";
 export interface ContainerProps<T extends ElementType = "div"> {
     component?: T;

package/dist/components/MultiAccordion/MultiAccordion.d.ts

@@ -0,0 +1,35 @@
+import { IconSize } from '../Icon/types';
+import { IconName } from '..';
+import { ReactElement, ReactNode } from 'react';
+import { GapOptions } from '../Container/Container';
+import { SizeType as SpacerSizeType } from '../Spacer/Spacer';
+import * as RadixAccordion from "@radix-ui/react-accordion";
+type Size = "none" | "sm" | "md" | "lg";
+type Color = "default" | "link";
+type MarkAsCompletedFunctionType = (value: string) => void | Promise<void>;
+interface MultiAccordionCommonProps {
+    children: React.ReactNode;
+    size?: Size;
+    fillWidth?: boolean;
+    gap?: GapOptions;
+    showBorder?: boolean;
+    showCheck?: boolean;
+    markAsCompleted?: MarkAsCompletedFunctionType;
+}
+export type MultiAccordionProps = MultiAccordionCommonProps & (Omit<RadixAccordion.AccordionMultipleProps, "children"> | Omit<RadixAccordion.AccordionSingleProps, "children">);
+export declare const MultiAccordion: {
+    ({ size, children, fillWidth, showCheck, showBorder, gap, markAsCompleted, ...delegated }: MultiAccordionProps): import("react/jsx-runtime").JSX.Element;
+    Item: {
+        ({ value, title, color, icon, iconSize, gap, children, isCompleted, ...props }: MultiAccordionItemProps): ReactElement;
+        displayName: string;
+    };
+};
+interface MultiAccordionItemProps extends Omit<RadixAccordion.AccordionItemProps, "title"> {
+    title: ReactNode;
+    color?: Color;
+    icon?: IconName;
+    iconSize?: IconSize;
+    gap?: SpacerSizeType;
+    isCompleted?: boolean;
+}
+export {};

package/dist/components/MultiAccordion/MultiAccordionDemo.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+
+declare const MultiAccordionDemo: () => ReactElement;
+export default MultiAccordionDemo;

package/dist/components/Spacer/Spacer.d.ts

@@ -1,6 +1,5 @@
-type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 export interface SpacerProps {
     size?: SizeType;
 }
 export declare const Spacer: ({ size }: SpacerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/index.d.ts

@@ -64,3 +64,4 @@ export { useToast } from './Toast/useToast';
 export { createToast } from './Toast/toastEmitter';
 export { UserIcon as ProfileIcon } from './icons/UserIcon';
 export { default as VerticalStepper } from './VerticalStepper/VerticalStepper';
+export { MultiAccordion } from './MultiAccordion/MultiAccordion';

package/dist/components/types.d.ts

@@ -56,6 +56,7 @@ export type { AutoCompleteProps, AutoCompleteOptionListItem, } from './AutoCompl
 export type { PaginationProps } from './Pagination/Pagination';
 export type { ContextMenuItemProps } from './ContextMenu/ContextMenu';
 export type { GenericLabelProps } from './GenericLabel/GenericLabel';
+export type { MultiAccordionProps } from './MultiAccordion/MultiAccordion';
 export type { IconButtonProps };
 export type { AlertProps };
 export type { AvatarProps };

package/dist/styles/types.d.ts

@@ -2919,6 +2919,7 @@ export interface Theme {
             "base": string;
         };
         "slate": {
+            "25": string;
             "50": string;
             "100": string;
             "200": string;

package/dist/styles/variables.json.d.ts

@@ -1270,7 +1270,7 @@ declare const _default: {
       },
       "color": {
         "background": {
-          "default": "rgb(96.6% 96.9% 98.1%)",
+          "default": "rgb(98.5% 98.9% 100%)",
           "hover": "rgb(96.6% 96.9% 98.1%)",
           "active": "#ffffff",
           "disabled": "#dfdfdf",
@@ -2919,6 +2919,7 @@ declare const _default: {
       "base": "#212121"
     },
     "slate": {
+      "25": "#FBFCFF",
       "50": "#f6f7fa",
       "100": "#e6e7e9",
       "200": "#cccfd3",

package/dist/styles/variables.light.json.d.ts

@@ -677,7 +677,7 @@ declare const _default: {
     "field": {
       "color": {
         "background": {
-          "default": "rgb(96.6% 96.9% 98.1%)",
+          "default": "rgb(98.5% 98.9% 100%)",
           "hover": "rgb(96.6% 96.9% 98.1%)",
           "active": "#ffffff",
           "disabled": "#dfdfdf",

package/package.json

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