@clickhouse/click-ui 0.0.187 → 0.0.188

package/dist/click-ui.es.js

@@ -9300,13 +9300,14 @@ const Wrapper$c = styled.div.withConfig({
 })(["display:inline-flex;", ""], ({
   $state = "default",
   $size = "md",
+  $type = "opaque",
   theme: theme2
 }) => `
-    background-color: ${theme2.click.badge.color.background[$state]};
-    color: ${theme2.click.badge.color.text[$state]};
+    background-color: ${theme2.click.badge[$type].color.background[$state]};
+    color: ${theme2.click.badge[$type].color.text[$state]};
     font: ${theme2.click.badge.typography.label[$size].default};
     border-radius: ${theme2.click.badge.radii.all};
-    border: ${theme2.click.badge.stroke} solid ${theme2.click.badge.color.stroke[$state]};
+    border: ${theme2.click.badge.stroke} solid ${theme2.click.badge[$type].color.stroke[$state]};
     padding: ${theme2.click.badge.space[$size].y} ${theme2.click.badge.space[$size].x};
   `);
 const Content$4 = styled.div.withConfig({
@@ -9320,9 +9321,10 @@ const SvgContainer = styled.svg.withConfig({
 })(["", ""], ({
   $state = "default",
   $size = "md",
+  $type = "opaque",
   theme: theme2
 }) => `
-    color: ${theme2.click.badge.color.text[$state]};
+    color: ${theme2.click.badge[$type].color.text[$state]};
     height: ${theme2.click.badge.icon[$size].size.height};
     width: ${theme2.click.badge.icon[$size].size.width};
   `);
@@ -9330,12 +9332,13 @@ const BadgeContent = styled.div.withConfig({
   componentId: "sc-471xo0-3"
 })(["width:auto;overflow:hidden;svg{", "}"], ({
   $state = "default",
-  size: size2 = "md",
+  $size = "md",
+  $type = "opaque",
   theme: theme2
 }) => `
-    color: ${theme2.click.badge.color.text[$state]};
-    height: ${theme2.click.badge.icon[size2].size.height};
-    width: ${theme2.click.badge.icon[size2].size.width};
+    color: ${theme2.click.badge[$type].color.text[$state]};
+    height: ${theme2.click.badge.icon[$size].size.height};
+    width: ${theme2.click.badge.icon[$size].size.width};
     gap: inherit;
   `);
 const Badge = ({
@@ -9344,10 +9347,11 @@ const Badge = ({
   text: text2,
   state = "default",
   size: size2,
+  type,
   dismissible,
   onClose,
   ...props
-}) => /* @__PURE__ */ jsx(Wrapper$c, { $state: state, $size: size2, ...props, children: /* @__PURE__ */ jsxs(Content$4, { children: [
+}) => /* @__PURE__ */ jsx(Wrapper$c, { $state: state, $size: size2, $type: type, ...props, children: /* @__PURE__ */ jsxs(Content$4, { children: [
   /* @__PURE__ */ jsx(BadgeContent, { as: IconWrapper$3, icon, iconDir, size: size2, $state: state, children: text2 }),
   dismissible && /* @__PURE__ */ jsx(SvgContainer, { name: "cross", $state: state, as: SvgImage, onClick: onClose, "aria-label": "close" })
 ] }) });
@@ -34004,6 +34008,16 @@ const SearchField = forwardRef(({
     loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
   ] });
 });
+const useUpdateEffect = (effect, deps) => {
+  const isFirstMount = useRef(true);
+  useEffect(() => {
+    if (isFirstMount) {
+      isFirstMount.current = false;
+      return;
+    }
+    return effect();
+  }, deps);
+};
 const SelectPopoverRoot = styled($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9).withConfig({
   componentId: "sc-oudbwg-0"
 })(["width:100%;"]);
@@ -37993,7 +38007,7 @@ const Select = ({
       onSelect(values[0]);
     }
   }, [selectedValues, onSelect]);
-  useEffect(() => {
+  useUpdateEffect(() => {
     setSelectedValues(valueProp ? [valueProp] : []);
   }, [valueProp]);
   const conditionalProps = {};
@@ -38023,7 +38037,7 @@ const MultiSelect = ({
       onOpenChangeProp(open22);
     }
   }, [onOpenChangeProp]);
-  useEffect(() => {
+  useUpdateEffect(() => {
     setSelectedValues(valueProp ?? []);
   }, [valueProp]);
   const onChange = useCallback((values, type) => {
@@ -42880,33 +42894,66 @@ const click$2 = {
     }
   },
   badge: {
-    color: {
-      background: {
-        "default": "#1F1F1C",
-        success: "rgb(20% 100% 26.7% / 0.2)",
-        neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
-        danger: "rgb(100% 13.7% 13.7% / 0.2)",
-        disabled: "#414141",
-        info: "rgb(26.3% 49.4% 93.7% / 0.2)",
-        warning: "rgb(100% 46.7% 16.1% / 0.2)"
-      },
-      text: {
-        "default": "#b3b6bd",
-        success: "#CCFFD0",
-        neutral: "#c0c0c0",
-        danger: "#ffbaba",
-        disabled: "#808080",
-        info: "#D0DFFB",
-        warning: "#FFB88F"
-      },
-      stroke: {
-        "default": "#323232",
-        success: "rgb(20% 100% 26.7% / 0.1)",
-        neutral: "rgb(62.7% 62.7% 62.7% / 0.1)",
-        danger: "rgb(100% 22.3% 22.3% / 0.2)",
-        disabled: "rgb(24.2% 24.2% 24.2%)",
-        info: "rgb(26.3% 49.4% 93.7% / 0.1)",
-        warning: "rgb(100% 46.7% 16.1% / 0.1)"
+    opaque: {
+      color: {
+        background: {
+          "default": "#1F1F1C",
+          success: "rgb(20% 100% 26.7% / 0.2)",
+          neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
+          danger: "rgb(100% 13.7% 13.7% / 0.2)",
+          disabled: "#414141",
+          info: "rgb(26.3% 49.4% 93.7% / 0.2)",
+          warning: "rgb(100% 46.7% 16.1% / 0.2)"
+        },
+        text: {
+          "default": "#b3b6bd",
+          success: "#CCFFD0",
+          neutral: "#c0c0c0",
+          danger: "#ffbaba",
+          disabled: "#808080",
+          info: "#D0DFFB",
+          warning: "#FFB88F"
+        },
+        stroke: {
+          "default": "#323232",
+          success: "rgb(20% 100% 26.7% / 0.1)",
+          neutral: "rgb(62.7% 62.7% 62.7% / 0.1)",
+          danger: "rgb(100% 22.3% 22.3% / 0.2)",
+          disabled: "rgb(24.2% 24.2% 24.2%)",
+          info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+          warning: "rgb(100% 46.7% 16.1% / 0.1)"
+        }
+      }
+    },
+    solid: {
+      color: {
+        background: {
+          "default": "#c0c0c0",
+          success: "#99FFA1",
+          neutral: "#c0c0c0",
+          danger: "#ff9898",
+          disabled: "#414141",
+          info: "#A1BEF7",
+          warning: "#FF9457"
+        },
+        text: {
+          "default": "#1F1F1C",
+          success: "#1F1F1C",
+          neutral: "#1F1F1C",
+          danger: "#1F1F1C",
+          disabled: "#808080",
+          info: "#1F1F1C",
+          warning: "#1F1F1C"
+        },
+        stroke: {
+          "default": "rgb(19.6% 19.6% 19.6% / 0.1)",
+          success: "rgb(20% 100% 26.7% / 0.1)",
+          neutral: "rgb(62.7% 62.7% 62.7% / 0.1)",
+          danger: "rgb(100% 22.3% 22.3% / 0.2)",
+          disabled: "rgb(24.2% 24.2% 24.2%)",
+          info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+          warning: "rgb(100% 46.7% 16.1% / 0.1)"
+        }
       }
     }
   },
@@ -44628,33 +44675,66 @@ const click$1 = {
     }
   },
   badge: {
-    color: {
-      background: {
-        "default": "#f6f7fa",
-        success: "rgb(20% 100% 26.7% / 0.1)",
-        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
-        danger: "rgb(100% 13.7% 13.7% / 0.1)",
-        disabled: "#dfdfdf",
-        info: "rgb(26.3% 49.4% 93.7% / 0.1)",
-        warning: "rgb(100% 46.7% 16.1% / 0.1)"
-      },
-      text: {
-        "default": "#696e79",
-        success: "#008A0B",
-        neutral: "#53575f",
-        danger: "#c10000",
-        disabled: "#a0a0a0",
-        info: "#437EEF",
-        warning: "#A33C00"
-      },
-      stroke: {
-        "default": "#e6e7e9",
-        success: "rgb(20% 100% 26.7% / 0.05)",
-        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
-        danger: "rgb(100% 13.7% 13.7% / 0.05)",
-        disabled: "rgb(83.1% 83.1% 83.1%)",
-        info: "rgb(26.3% 49.4% 93.7% / 0.05)",
-        warning: "rgb(100% 46.7% 16.1% / 0.05)"
+    opaque: {
+      color: {
+        background: {
+          "default": "#f6f7fa",
+          success: "rgb(20% 100% 26.7% / 0.1)",
+          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+          danger: "rgb(100% 13.7% 13.7% / 0.1)",
+          disabled: "#dfdfdf",
+          info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+          warning: "rgb(100% 46.7% 16.1% / 0.1)"
+        },
+        text: {
+          "default": "#696e79",
+          success: "#008A0B",
+          neutral: "#53575f",
+          danger: "#c10000",
+          disabled: "#a0a0a0",
+          info: "#437EEF",
+          warning: "#A33C00"
+        },
+        stroke: {
+          "default": "#e6e7e9",
+          success: "rgb(20% 100% 26.7% / 0.05)",
+          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+          danger: "rgb(100% 13.7% 13.7% / 0.05)",
+          disabled: "rgb(83.1% 83.1% 83.1%)",
+          info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+          warning: "rgb(100% 46.7% 16.1% / 0.05)"
+        }
+      }
+    },
+    solid: {
+      color: {
+        background: {
+          "default": "#a0a0a0",
+          success: "#008A0B",
+          neutral: "#606060",
+          danger: "#c10000",
+          disabled: "#dfdfdf",
+          info: "#104EC6",
+          warning: "#D64F00"
+        },
+        text: {
+          "default": "#ffffff",
+          success: "#ffffff",
+          neutral: "#ffffff",
+          danger: "#ffffff",
+          disabled: "#a0a0a0",
+          info: "#ffffff",
+          warning: "#ffffff"
+        },
+        stroke: {
+          "default": "rgb(90.2% 90.6% 91.4% / 0.1)",
+          success: "rgb(20% 100% 26.7% / 0.05)",
+          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+          danger: "rgb(100% 13.7% 13.7% / 0.05)",
+          disabled: "rgb(83.1% 83.1% 83.1%)",
+          info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+          warning: "rgb(100% 46.7% 16.1% / 0.05)"
+        }
       }
     }
   },
@@ -46524,33 +46604,66 @@ const click = {
         }
       }
     },
-    color: {
-      background: {
-        "default": "#f6f7fa",
-        success: "rgb(20% 100% 26.7% / 0.1)",
-        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
-        danger: "rgb(100% 13.7% 13.7% / 0.1)",
-        disabled: "#dfdfdf",
-        info: "rgb(26.3% 49.4% 93.7% / 0.1)",
-        warning: "rgb(100% 46.7% 16.1% / 0.1)"
-      },
-      text: {
-        "default": "#696e79",
-        success: "#008A0B",
-        neutral: "#53575f",
-        danger: "#c10000",
-        disabled: "#a0a0a0",
-        info: "#437EEF",
-        warning: "#A33C00"
-      },
-      stroke: {
-        "default": "#e6e7e9",
-        success: "rgb(20% 100% 26.7% / 0.05)",
-        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
-        danger: "rgb(100% 13.7% 13.7% / 0.05)",
-        disabled: "rgb(83.1% 83.1% 83.1%)",
-        info: "rgb(26.3% 49.4% 93.7% / 0.05)",
-        warning: "rgb(100% 46.7% 16.1% / 0.05)"
+    opaque: {
+      color: {
+        background: {
+          "default": "#f6f7fa",
+          success: "rgb(20% 100% 26.7% / 0.1)",
+          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+          danger: "rgb(100% 13.7% 13.7% / 0.1)",
+          disabled: "#dfdfdf",
+          info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+          warning: "rgb(100% 46.7% 16.1% / 0.1)"
+        },
+        text: {
+          "default": "#696e79",
+          success: "#008A0B",
+          neutral: "#53575f",
+          danger: "#c10000",
+          disabled: "#a0a0a0",
+          info: "#437EEF",
+          warning: "#A33C00"
+        },
+        stroke: {
+          "default": "#e6e7e9",
+          success: "rgb(20% 100% 26.7% / 0.05)",
+          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+          danger: "rgb(100% 13.7% 13.7% / 0.05)",
+          disabled: "rgb(83.1% 83.1% 83.1%)",
+          info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+          warning: "rgb(100% 46.7% 16.1% / 0.05)"
+        }
+      }
+    },
+    solid: {
+      color: {
+        background: {
+          "default": "#a0a0a0",
+          success: "#008A0B",
+          neutral: "#606060",
+          danger: "#c10000",
+          disabled: "#dfdfdf",
+          info: "#104EC6",
+          warning: "#D64F00"
+        },
+        text: {
+          "default": "#ffffff",
+          success: "#ffffff",
+          neutral: "#ffffff",
+          danger: "#ffffff",
+          disabled: "#a0a0a0",
+          info: "#ffffff",
+          warning: "#ffffff"
+        },
+        stroke: {
+          "default": "rgb(90.2% 90.6% 91.4% / 0.1)",
+          success: "rgb(20% 100% 26.7% / 0.05)",
+          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+          danger: "rgb(100% 13.7% 13.7% / 0.05)",
+          disabled: "rgb(83.1% 83.1% 83.1%)",
+          info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+          warning: "rgb(100% 46.7% 16.1% / 0.05)"
+        }
       }
     }
   },

package/dist/click-ui.umd.js

@@ -9316,13 +9316,14 @@ var __publicField = (obj, key, value) => {
   })(["display:inline-flex;", ""], ({
     $state = "default",
     $size = "md",
+    $type = "opaque",
     theme: theme2
   }) => `
-    background-color: ${theme2.click.badge.color.background[$state]};
-    color: ${theme2.click.badge.color.text[$state]};
+    background-color: ${theme2.click.badge[$type].color.background[$state]};
+    color: ${theme2.click.badge[$type].color.text[$state]};
     font: ${theme2.click.badge.typography.label[$size].default};
     border-radius: ${theme2.click.badge.radii.all};
-    border: ${theme2.click.badge.stroke} solid ${theme2.click.badge.color.stroke[$state]};
+    border: ${theme2.click.badge.stroke} solid ${theme2.click.badge[$type].color.stroke[$state]};
     padding: ${theme2.click.badge.space[$size].y} ${theme2.click.badge.space[$size].x};
   `);
   const Content$4 = styledComponents.styled.div.withConfig({
@@ -9336,9 +9337,10 @@ var __publicField = (obj, key, value) => {
   })(["", ""], ({
     $state = "default",
     $size = "md",
+    $type = "opaque",
     theme: theme2
   }) => `
-    color: ${theme2.click.badge.color.text[$state]};
+    color: ${theme2.click.badge[$type].color.text[$state]};
     height: ${theme2.click.badge.icon[$size].size.height};
     width: ${theme2.click.badge.icon[$size].size.width};
   `);
@@ -9346,12 +9348,13 @@ var __publicField = (obj, key, value) => {
     componentId: "sc-471xo0-3"
   })(["width:auto;overflow:hidden;svg{", "}"], ({
     $state = "default",
-    size: size2 = "md",
+    $size = "md",
+    $type = "opaque",
     theme: theme2
   }) => `
-    color: ${theme2.click.badge.color.text[$state]};
-    height: ${theme2.click.badge.icon[size2].size.height};
-    width: ${theme2.click.badge.icon[size2].size.width};
+    color: ${theme2.click.badge[$type].color.text[$state]};
+    height: ${theme2.click.badge.icon[$size].size.height};
+    width: ${theme2.click.badge.icon[$size].size.width};
     gap: inherit;
   `);
   const Badge = ({
@@ -9360,10 +9363,11 @@ var __publicField = (obj, key, value) => {
     text: text2,
     state = "default",
     size: size2,
+    type,
     dismissible,
     onClose,
     ...props
-  }) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper$c, { $state: state, $size: size2, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Content$4, { children: [
+  }) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper$c, { $state: state, $size: size2, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Content$4, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(BadgeContent, { as: IconWrapper$3, icon, iconDir, size: size2, $state: state, children: text2 }),
     dismissible && /* @__PURE__ */ jsxRuntime.jsx(SvgContainer, { name: "cross", $state: state, as: SvgImage, onClick: onClose, "aria-label": "close" })
   ] }) });
@@ -34020,6 +34024,16 @@ var __publicField = (obj, key, value) => {
       loading && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "loading-animated", size: "sm" })
     ] });
   });
+  const useUpdateEffect = (effect, deps) => {
+    const isFirstMount = React.useRef(true);
+    React.useEffect(() => {
+      if (isFirstMount) {
+        isFirstMount.current = false;
+        return;
+      }
+      return effect();
+    }, deps);
+  };
   const SelectPopoverRoot = styledComponents.styled($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-oudbwg-0"
   })(["width:100%;"]);
@@ -38009,7 +38023,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
         onSelect(values[0]);
       }
     }, [selectedValues, onSelect]);
-    React.useEffect(() => {
+    useUpdateEffect(() => {
       setSelectedValues(valueProp ? [valueProp] : []);
     }, [valueProp]);
     const conditionalProps = {};
@@ -38039,7 +38053,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
         onOpenChangeProp(open22);
       }
     }, [onOpenChangeProp]);
-    React.useEffect(() => {
+    useUpdateEffect(() => {
       setSelectedValues(valueProp ?? []);
     }, [valueProp]);
     const onChange = React.useCallback((values, type) => {
@@ -42896,33 +42910,66 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       }
     },
     badge: {
-      color: {
-        background: {
-          "default": "#1F1F1C",
-          success: "rgb(20% 100% 26.7% / 0.2)",
-          neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
-          danger: "rgb(100% 13.7% 13.7% / 0.2)",
-          disabled: "#414141",
-          info: "rgb(26.3% 49.4% 93.7% / 0.2)",
-          warning: "rgb(100% 46.7% 16.1% / 0.2)"
-        },
-        text: {
-          "default": "#b3b6bd",
-          success: "#CCFFD0",
-          neutral: "#c0c0c0",
-          danger: "#ffbaba",
-          disabled: "#808080",
-          info: "#D0DFFB",
-          warning: "#FFB88F"
-        },
-        stroke: {
-          "default": "#323232",
-          success: "rgb(20% 100% 26.7% / 0.1)",
-          neutral: "rgb(62.7% 62.7% 62.7% / 0.1)",
-          danger: "rgb(100% 22.3% 22.3% / 0.2)",
-          disabled: "rgb(24.2% 24.2% 24.2%)",
-          info: "rgb(26.3% 49.4% 93.7% / 0.1)",
-          warning: "rgb(100% 46.7% 16.1% / 0.1)"
+      opaque: {
+        color: {
+          background: {
+            "default": "#1F1F1C",
+            success: "rgb(20% 100% 26.7% / 0.2)",
+            neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
+            danger: "rgb(100% 13.7% 13.7% / 0.2)",
+            disabled: "#414141",
+            info: "rgb(26.3% 49.4% 93.7% / 0.2)",
+            warning: "rgb(100% 46.7% 16.1% / 0.2)"
+          },
+          text: {
+            "default": "#b3b6bd",
+            success: "#CCFFD0",
+            neutral: "#c0c0c0",
+            danger: "#ffbaba",
+            disabled: "#808080",
+            info: "#D0DFFB",
+            warning: "#FFB88F"
+          },
+          stroke: {
+            "default": "#323232",
+            success: "rgb(20% 100% 26.7% / 0.1)",
+            neutral: "rgb(62.7% 62.7% 62.7% / 0.1)",
+            danger: "rgb(100% 22.3% 22.3% / 0.2)",
+            disabled: "rgb(24.2% 24.2% 24.2%)",
+            info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+            warning: "rgb(100% 46.7% 16.1% / 0.1)"
+          }
+        }
+      },
+      solid: {
+        color: {
+          background: {
+            "default": "#c0c0c0",
+            success: "#99FFA1",
+            neutral: "#c0c0c0",
+            danger: "#ff9898",
+            disabled: "#414141",
+            info: "#A1BEF7",
+            warning: "#FF9457"
+          },
+          text: {
+            "default": "#1F1F1C",
+            success: "#1F1F1C",
+            neutral: "#1F1F1C",
+            danger: "#1F1F1C",
+            disabled: "#808080",
+            info: "#1F1F1C",
+            warning: "#1F1F1C"
+          },
+          stroke: {
+            "default": "rgb(19.6% 19.6% 19.6% / 0.1)",
+            success: "rgb(20% 100% 26.7% / 0.1)",
+            neutral: "rgb(62.7% 62.7% 62.7% / 0.1)",
+            danger: "rgb(100% 22.3% 22.3% / 0.2)",
+            disabled: "rgb(24.2% 24.2% 24.2%)",
+            info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+            warning: "rgb(100% 46.7% 16.1% / 0.1)"
+          }
         }
       }
     },
@@ -44644,33 +44691,66 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       }
     },
     badge: {
-      color: {
-        background: {
-          "default": "#f6f7fa",
-          success: "rgb(20% 100% 26.7% / 0.1)",
-          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
-          danger: "rgb(100% 13.7% 13.7% / 0.1)",
-          disabled: "#dfdfdf",
-          info: "rgb(26.3% 49.4% 93.7% / 0.1)",
-          warning: "rgb(100% 46.7% 16.1% / 0.1)"
-        },
-        text: {
-          "default": "#696e79",
-          success: "#008A0B",
-          neutral: "#53575f",
-          danger: "#c10000",
-          disabled: "#a0a0a0",
-          info: "#437EEF",
-          warning: "#A33C00"
-        },
-        stroke: {
-          "default": "#e6e7e9",
-          success: "rgb(20% 100% 26.7% / 0.05)",
-          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
-          danger: "rgb(100% 13.7% 13.7% / 0.05)",
-          disabled: "rgb(83.1% 83.1% 83.1%)",
-          info: "rgb(26.3% 49.4% 93.7% / 0.05)",
-          warning: "rgb(100% 46.7% 16.1% / 0.05)"
+      opaque: {
+        color: {
+          background: {
+            "default": "#f6f7fa",
+            success: "rgb(20% 100% 26.7% / 0.1)",
+            neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+            danger: "rgb(100% 13.7% 13.7% / 0.1)",
+            disabled: "#dfdfdf",
+            info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+            warning: "rgb(100% 46.7% 16.1% / 0.1)"
+          },
+          text: {
+            "default": "#696e79",
+            success: "#008A0B",
+            neutral: "#53575f",
+            danger: "#c10000",
+            disabled: "#a0a0a0",
+            info: "#437EEF",
+            warning: "#A33C00"
+          },
+          stroke: {
+            "default": "#e6e7e9",
+            success: "rgb(20% 100% 26.7% / 0.05)",
+            neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+            danger: "rgb(100% 13.7% 13.7% / 0.05)",
+            disabled: "rgb(83.1% 83.1% 83.1%)",
+            info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+            warning: "rgb(100% 46.7% 16.1% / 0.05)"
+          }
+        }
+      },
+      solid: {
+        color: {
+          background: {
+            "default": "#a0a0a0",
+            success: "#008A0B",
+            neutral: "#606060",
+            danger: "#c10000",
+            disabled: "#dfdfdf",
+            info: "#104EC6",
+            warning: "#D64F00"
+          },
+          text: {
+            "default": "#ffffff",
+            success: "#ffffff",
+            neutral: "#ffffff",
+            danger: "#ffffff",
+            disabled: "#a0a0a0",
+            info: "#ffffff",
+            warning: "#ffffff"
+          },
+          stroke: {
+            "default": "rgb(90.2% 90.6% 91.4% / 0.1)",
+            success: "rgb(20% 100% 26.7% / 0.05)",
+            neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+            danger: "rgb(100% 13.7% 13.7% / 0.05)",
+            disabled: "rgb(83.1% 83.1% 83.1%)",
+            info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+            warning: "rgb(100% 46.7% 16.1% / 0.05)"
+          }
         }
       }
     },
@@ -46540,33 +46620,66 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           }
         }
       },
-      color: {
-        background: {
-          "default": "#f6f7fa",
-          success: "rgb(20% 100% 26.7% / 0.1)",
-          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
-          danger: "rgb(100% 13.7% 13.7% / 0.1)",
-          disabled: "#dfdfdf",
-          info: "rgb(26.3% 49.4% 93.7% / 0.1)",
-          warning: "rgb(100% 46.7% 16.1% / 0.1)"
-        },
-        text: {
-          "default": "#696e79",
-          success: "#008A0B",
-          neutral: "#53575f",
-          danger: "#c10000",
-          disabled: "#a0a0a0",
-          info: "#437EEF",
-          warning: "#A33C00"
-        },
-        stroke: {
-          "default": "#e6e7e9",
-          success: "rgb(20% 100% 26.7% / 0.05)",
-          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
-          danger: "rgb(100% 13.7% 13.7% / 0.05)",
-          disabled: "rgb(83.1% 83.1% 83.1%)",
-          info: "rgb(26.3% 49.4% 93.7% / 0.05)",
-          warning: "rgb(100% 46.7% 16.1% / 0.05)"
+      opaque: {
+        color: {
+          background: {
+            "default": "#f6f7fa",
+            success: "rgb(20% 100% 26.7% / 0.1)",
+            neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+            danger: "rgb(100% 13.7% 13.7% / 0.1)",
+            disabled: "#dfdfdf",
+            info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+            warning: "rgb(100% 46.7% 16.1% / 0.1)"
+          },
+          text: {
+            "default": "#696e79",
+            success: "#008A0B",
+            neutral: "#53575f",
+            danger: "#c10000",
+            disabled: "#a0a0a0",
+            info: "#437EEF",
+            warning: "#A33C00"
+          },
+          stroke: {
+            "default": "#e6e7e9",
+            success: "rgb(20% 100% 26.7% / 0.05)",
+            neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+            danger: "rgb(100% 13.7% 13.7% / 0.05)",
+            disabled: "rgb(83.1% 83.1% 83.1%)",
+            info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+            warning: "rgb(100% 46.7% 16.1% / 0.05)"
+          }
+        }
+      },
+      solid: {
+        color: {
+          background: {
+            "default": "#a0a0a0",
+            success: "#008A0B",
+            neutral: "#606060",
+            danger: "#c10000",
+            disabled: "#dfdfdf",
+            info: "#104EC6",
+            warning: "#D64F00"
+          },
+          text: {
+            "default": "#ffffff",
+            success: "#ffffff",
+            neutral: "#ffffff",
+            danger: "#ffffff",
+            disabled: "#a0a0a0",
+            info: "#ffffff",
+            warning: "#ffffff"
+          },
+          stroke: {
+            "default": "rgb(90.2% 90.6% 91.4% / 0.1)",
+            success: "rgb(20% 100% 26.7% / 0.05)",
+            neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+            danger: "rgb(100% 13.7% 13.7% / 0.05)",
+            disabled: "rgb(83.1% 83.1% 83.1%)",
+            info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+            warning: "rgb(100% 46.7% 16.1% / 0.05)"
+          }
         }
       }
     },

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

@@ -4,10 +4,12 @@ import { ImageName } from '../Icon/types';
 
 export type BadgeState = "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info";
 export type BadgeSize = "sm" | "md";
+export type BadgeType = "opaque" | "solid";
 export interface CommonBadgeProps extends HTMLAttributes<HTMLDivElement> {
     text: ReactNode;
     state?: BadgeState;
     size?: BadgeSize;
+    type?: BadgeType;
     icon?: ImageName;
     iconDir?: HorizontalDirection;
 }
@@ -20,4 +22,4 @@ export interface NonDismissibleBadge extends CommonBadgeProps {
     onClose?: never;
 }
 export type BadgeProps = NonDismissibleBadge | DismissibleBadge;
-export declare const Badge: ({ icon, iconDir, text, state, size, dismissible, onClose, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ icon, iconDir, text, state, size, type, dismissible, onClose, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
 export declare const TopBadgeWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<any, never> & import('../Container/Container').ContainerProps<import('react').ElementType>, never>> & string & Omit<(<T extends import('react').ElementType = "div">(props: Omit<import('react').ComponentProps<T>, keyof T> & import('../Container/Container').ContainerProps<T>) => import('react').ReactNode), keyof import('react').Component<any, {}, any>>;
 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;
-}>> & 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>>;
+}>> & string & Omit<({ icon, iconDir, text, state, size, type, dismissible, onClose, ...props }: import('../Badge/Badge').BadgeProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useUpdateEffect';

package/dist/hooks/useUpdateEffect.d.ts

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+
+export declare const useUpdateEffect: typeof useEffect;

package/dist/styles/types.d.ts

@@ -239,33 +239,66 @@ export interface Theme {
                     };
                 };
             };
-            "color": {
-                "background": {
-                    "default": string;
-                    "success": string;
-                    "neutral": string;
-                    "danger": string;
-                    "disabled": string;
-                    "info": string;
-                    "warning": string;
-                };
-                "text": {
-                    "default": string;
-                    "success": string;
-                    "neutral": string;
-                    "danger": string;
-                    "disabled": string;
-                    "info": string;
-                    "warning": string;
+            "opaque": {
+                "color": {
+                    "background": {
+                        "default": string;
+                        "success": string;
+                        "neutral": string;
+                        "danger": string;
+                        "disabled": string;
+                        "info": string;
+                        "warning": string;
+                    };
+                    "text": {
+                        "default": string;
+                        "success": string;
+                        "neutral": string;
+                        "danger": string;
+                        "disabled": string;
+                        "info": string;
+                        "warning": string;
+                    };
+                    "stroke": {
+                        "default": string;
+                        "success": string;
+                        "neutral": string;
+                        "danger": string;
+                        "disabled": string;
+                        "info": string;
+                        "warning": string;
+                    };
                 };
-                "stroke": {
-                    "default": string;
-                    "success": string;
-                    "neutral": string;
-                    "danger": string;
-                    "disabled": string;
-                    "info": string;
-                    "warning": string;
+            };
+            "solid": {
+                "color": {
+                    "background": {
+                        "default": string;
+                        "success": string;
+                        "neutral": string;
+                        "danger": string;
+                        "disabled": string;
+                        "info": string;
+                        "warning": string;
+                    };
+                    "text": {
+                        "default": string;
+                        "success": string;
+                        "neutral": string;
+                        "danger": string;
+                        "disabled": string;
+                        "info": string;
+                        "warning": string;
+                    };
+                    "stroke": {
+                        "default": string;
+                        "success": string;
+                        "neutral": string;
+                        "danger": string;
+                        "disabled": string;
+                        "info": string;
+                        "warning": string;
+                    };
                 };
             };
         };

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

@@ -79,33 +79,66 @@ declare const _default: {
       }
     },
     "badge": {
-      "color": {
-        "background": {
-          "default": "#1F1F1C",
-          "success": "rgb(20% 100% 26.7% / 0.2)",
-          "neutral": "rgb(62.7% 62.7% 62.7% / 0.2)",
-          "danger": "rgb(100% 13.7% 13.7% / 0.2)",
-          "disabled": "#414141",
-          "info": "rgb(26.3% 49.4% 93.7% / 0.2)",
-          "warning": "rgb(100% 46.7% 16.1% / 0.2)"
-        },
-        "text": {
-          "default": "#b3b6bd",
-          "success": "#CCFFD0",
-          "neutral": "#c0c0c0",
-          "danger": "#ffbaba",
-          "disabled": "#808080",
-          "info": "#D0DFFB",
-          "warning": "#FFB88F"
-        },
-        "stroke": {
-          "default": "#323232",
-          "success": "rgb(20% 100% 26.7% / 0.1)",
-          "neutral": "rgb(62.7% 62.7% 62.7% / 0.1)",
-          "danger": "rgb(100% 22.3% 22.3% / 0.2)",
-          "disabled": "rgb(24.2% 24.2% 24.2%)",
-          "info": "rgb(26.3% 49.4% 93.7% / 0.1)",
-          "warning": "rgb(100% 46.7% 16.1% / 0.1)"
+      "opaque": {
+        "color": {
+          "background": {
+            "default": "#1F1F1C",
+            "success": "rgb(20% 100% 26.7% / 0.2)",
+            "neutral": "rgb(62.7% 62.7% 62.7% / 0.2)",
+            "danger": "rgb(100% 13.7% 13.7% / 0.2)",
+            "disabled": "#414141",
+            "info": "rgb(26.3% 49.4% 93.7% / 0.2)",
+            "warning": "rgb(100% 46.7% 16.1% / 0.2)"
+          },
+          "text": {
+            "default": "#b3b6bd",
+            "success": "#CCFFD0",
+            "neutral": "#c0c0c0",
+            "danger": "#ffbaba",
+            "disabled": "#808080",
+            "info": "#D0DFFB",
+            "warning": "#FFB88F"
+          },
+          "stroke": {
+            "default": "#323232",
+            "success": "rgb(20% 100% 26.7% / 0.1)",
+            "neutral": "rgb(62.7% 62.7% 62.7% / 0.1)",
+            "danger": "rgb(100% 22.3% 22.3% / 0.2)",
+            "disabled": "rgb(24.2% 24.2% 24.2%)",
+            "info": "rgb(26.3% 49.4% 93.7% / 0.1)",
+            "warning": "rgb(100% 46.7% 16.1% / 0.1)"
+          }
+        }
+      },
+      "solid": {
+        "color": {
+          "background": {
+            "default": "#c0c0c0",
+            "success": "#99FFA1",
+            "neutral": "#c0c0c0",
+            "danger": "#ff9898",
+            "disabled": "#414141",
+            "info": "#A1BEF7",
+            "warning": "#FF9457"
+          },
+          "text": {
+            "default": "#1F1F1C",
+            "success": "#1F1F1C",
+            "neutral": "#1F1F1C",
+            "danger": "#1F1F1C",
+            "disabled": "#808080",
+            "info": "#1F1F1C",
+            "warning": "#1F1F1C"
+          },
+          "stroke": {
+            "default": "rgb(19.6% 19.6% 19.6% / 0.1)",
+            "success": "rgb(20% 100% 26.7% / 0.1)",
+            "neutral": "rgb(62.7% 62.7% 62.7% / 0.1)",
+            "danger": "rgb(100% 22.3% 22.3% / 0.2)",
+            "disabled": "rgb(24.2% 24.2% 24.2%)",
+            "info": "rgb(26.3% 49.4% 93.7% / 0.1)",
+            "warning": "rgb(100% 46.7% 16.1% / 0.1)"
+          }
         }
       }
     },

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

@@ -239,33 +239,66 @@ declare const _default: {
           }
         }
       },
-      "color": {
-        "background": {
-          "default": "#f6f7fa",
-          "success": "rgb(20% 100% 26.7% / 0.1)",
-          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
-          "danger": "rgb(100% 13.7% 13.7% / 0.1)",
-          "disabled": "#dfdfdf",
-          "info": "rgb(26.3% 49.4% 93.7% / 0.1)",
-          "warning": "rgb(100% 46.7% 16.1% / 0.1)"
-        },
-        "text": {
-          "default": "#696e79",
-          "success": "#008A0B",
-          "neutral": "#53575f",
-          "danger": "#c10000",
-          "disabled": "#a0a0a0",
-          "info": "#437EEF",
-          "warning": "#A33C00"
-        },
-        "stroke": {
-          "default": "#e6e7e9",
-          "success": "rgb(20% 100% 26.7% / 0.05)",
-          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
-          "danger": "rgb(100% 13.7% 13.7% / 0.05)",
-          "disabled": "rgb(83.1% 83.1% 83.1%)",
-          "info": "rgb(26.3% 49.4% 93.7% / 0.05)",
-          "warning": "rgb(100% 46.7% 16.1% / 0.05)"
+      "opaque": {
+        "color": {
+          "background": {
+            "default": "#f6f7fa",
+            "success": "rgb(20% 100% 26.7% / 0.1)",
+            "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+            "danger": "rgb(100% 13.7% 13.7% / 0.1)",
+            "disabled": "#dfdfdf",
+            "info": "rgb(26.3% 49.4% 93.7% / 0.1)",
+            "warning": "rgb(100% 46.7% 16.1% / 0.1)"
+          },
+          "text": {
+            "default": "#696e79",
+            "success": "#008A0B",
+            "neutral": "#53575f",
+            "danger": "#c10000",
+            "disabled": "#a0a0a0",
+            "info": "#437EEF",
+            "warning": "#A33C00"
+          },
+          "stroke": {
+            "default": "#e6e7e9",
+            "success": "rgb(20% 100% 26.7% / 0.05)",
+            "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+            "danger": "rgb(100% 13.7% 13.7% / 0.05)",
+            "disabled": "rgb(83.1% 83.1% 83.1%)",
+            "info": "rgb(26.3% 49.4% 93.7% / 0.05)",
+            "warning": "rgb(100% 46.7% 16.1% / 0.05)"
+          }
+        }
+      },
+      "solid": {
+        "color": {
+          "background": {
+            "default": "#a0a0a0",
+            "success": "#008A0B",
+            "neutral": "#606060",
+            "danger": "#c10000",
+            "disabled": "#dfdfdf",
+            "info": "#104EC6",
+            "warning": "#D64F00"
+          },
+          "text": {
+            "default": "#ffffff",
+            "success": "#ffffff",
+            "neutral": "#ffffff",
+            "danger": "#ffffff",
+            "disabled": "#a0a0a0",
+            "info": "#ffffff",
+            "warning": "#ffffff"
+          },
+          "stroke": {
+            "default": "rgb(90.2% 90.6% 91.4% / 0.1)",
+            "success": "rgb(20% 100% 26.7% / 0.05)",
+            "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+            "danger": "rgb(100% 13.7% 13.7% / 0.05)",
+            "disabled": "rgb(83.1% 83.1% 83.1%)",
+            "info": "rgb(26.3% 49.4% 93.7% / 0.05)",
+            "warning": "rgb(100% 46.7% 16.1% / 0.05)"
+          }
         }
       }
     },

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

@@ -79,33 +79,66 @@ declare const _default: {
       }
     },
     "badge": {
-      "color": {
-        "background": {
-          "default": "#f6f7fa",
-          "success": "rgb(20% 100% 26.7% / 0.1)",
-          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
-          "danger": "rgb(100% 13.7% 13.7% / 0.1)",
-          "disabled": "#dfdfdf",
-          "info": "rgb(26.3% 49.4% 93.7% / 0.1)",
-          "warning": "rgb(100% 46.7% 16.1% / 0.1)"
-        },
-        "text": {
-          "default": "#696e79",
-          "success": "#008A0B",
-          "neutral": "#53575f",
-          "danger": "#c10000",
-          "disabled": "#a0a0a0",
-          "info": "#437EEF",
-          "warning": "#A33C00"
-        },
-        "stroke": {
-          "default": "#e6e7e9",
-          "success": "rgb(20% 100% 26.7% / 0.05)",
-          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
-          "danger": "rgb(100% 13.7% 13.7% / 0.05)",
-          "disabled": "rgb(83.1% 83.1% 83.1%)",
-          "info": "rgb(26.3% 49.4% 93.7% / 0.05)",
-          "warning": "rgb(100% 46.7% 16.1% / 0.05)"
+      "opaque": {
+        "color": {
+          "background": {
+            "default": "#f6f7fa",
+            "success": "rgb(20% 100% 26.7% / 0.1)",
+            "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+            "danger": "rgb(100% 13.7% 13.7% / 0.1)",
+            "disabled": "#dfdfdf",
+            "info": "rgb(26.3% 49.4% 93.7% / 0.1)",
+            "warning": "rgb(100% 46.7% 16.1% / 0.1)"
+          },
+          "text": {
+            "default": "#696e79",
+            "success": "#008A0B",
+            "neutral": "#53575f",
+            "danger": "#c10000",
+            "disabled": "#a0a0a0",
+            "info": "#437EEF",
+            "warning": "#A33C00"
+          },
+          "stroke": {
+            "default": "#e6e7e9",
+            "success": "rgb(20% 100% 26.7% / 0.05)",
+            "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+            "danger": "rgb(100% 13.7% 13.7% / 0.05)",
+            "disabled": "rgb(83.1% 83.1% 83.1%)",
+            "info": "rgb(26.3% 49.4% 93.7% / 0.05)",
+            "warning": "rgb(100% 46.7% 16.1% / 0.05)"
+          }
+        }
+      },
+      "solid": {
+        "color": {
+          "background": {
+            "default": "#a0a0a0",
+            "success": "#008A0B",
+            "neutral": "#606060",
+            "danger": "#c10000",
+            "disabled": "#dfdfdf",
+            "info": "#104EC6",
+            "warning": "#D64F00"
+          },
+          "text": {
+            "default": "#ffffff",
+            "success": "#ffffff",
+            "neutral": "#ffffff",
+            "danger": "#ffffff",
+            "disabled": "#a0a0a0",
+            "info": "#ffffff",
+            "warning": "#ffffff"
+          },
+          "stroke": {
+            "default": "rgb(90.2% 90.6% 91.4% / 0.1)",
+            "success": "rgb(20% 100% 26.7% / 0.05)",
+            "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+            "danger": "rgb(100% 13.7% 13.7% / 0.05)",
+            "disabled": "rgb(83.1% 83.1% 83.1%)",
+            "info": "rgb(26.3% 49.4% 93.7% / 0.05)",
+            "warning": "rgb(100% 46.7% 16.1% / 0.05)"
+          }
         }
       }
     },

package/package.json

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