@central-icons-react/all 1.1.320 → 1.1.321

package/CentralIconBase/index.d.ts

@@ -6,8 +6,8 @@ export type CentralIconBaseProps = {
   mode?: "masked" | "raw";
   maskId?: string;
 } & SVGProps<SVGSVGElement>;
-export declare const CentralIconBase: React.FC<
-  CentralIconBaseProps & {
-    ariaLabel?: string;
-  }
->;
+type Props = CentralIconBaseProps & {
+  ariaLabel?: string;
+};
+export declare const CentralIconBase: React.FC<Props>;
+export {};

package/CentralIconBase/index.js

@@ -1,12 +1,32 @@
 import React from "react";
-export const CentralIconBase = ({ children, size = 24, ariaLabel, color, ariaHidden = true, style, mode = "masked", maskId, ...props }) => {
+const ModernCentralIconBase = (props) => {
+    const instanceId = React.useId();
+    return React.createElement(CentralIconSvg, { ...props, instanceId: instanceId });
+};
+let nextLegacyId = 0;
+class LegacyCentralIconBase extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {};
+    }
+    componentDidMount() {
+        // Defer legacy IDs until mount so server and initial client markup agree.
+        this.setState({ instanceId: `legacy-${++nextLegacyId}` });
+    }
+    render() {
+        return (React.createElement(CentralIconSvg, { ...this.props.iconProps, instanceId: this.state.instanceId }));
+    }
+}
+export const CentralIconBase = (props) => typeof React.useId === "function" ? (React.createElement(ModernCentralIconBase, { ...props })) : (React.createElement(LegacyCentralIconBase, { iconProps: props }));
+const CentralIconSvg = ({ children, size = 24, ariaLabel, color, ariaHidden = true, style, mode = "masked", maskId, instanceId, ...props }) => {
+    const uniqueMaskId = instanceId ? `${maskId}-${instanceId}` : maskId;
     const masked = mode !== "raw" && !!maskId;
     return (React.createElement("svg", { ...props, "aria-hidden": ariaHidden, role: ariaHidden ? undefined : "img", width: typeof size === "number" ? `${size}px` : size, height: typeof size === "number" ? `${size}px` : size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { color, ...style } },
         ariaLabel && !ariaHidden && React.createElement("title", null, ariaLabel),
         masked ? (React.createElement(React.Fragment, null,
-            React.createElement("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "24", height: "24" },
+            React.createElement("mask", { id: uniqueMaskId, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "24", height: "24" },
                 React.createElement("rect", { width: "24", height: "24", fill: "#000" }),
                 React.createElement("g", { fill: "none", style: { color: "#fff" } }, children)),
-            React.createElement("rect", { width: "24", height: "24", fill: "currentColor", mask: `url(#${maskId})` }))) : (children)));
+            React.createElement("rect", { width: "24", height: "24", fill: "currentColor", mask: `url(#${uniqueMaskId})` }))) : (children)));
 };
 //# sourceMappingURL=index.js.map

package/CentralIconBase/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/CentralIconBase/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,CAAC,MAAM,eAAe,GAExB,CAAC,EACH,QAAQ,EACR,IAAI,GAAG,EAAE,EACT,SAAS,EACT,KAAK,EACL,UAAU,GAAG,IAAI,EACjB,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,MAAM,CAAC;IAC1C,OAAO,CACL,gCACM,KAAK,iBACI,UAAU,EACvB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EACpC,KAAK,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,EACpD,MAAM,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,EACrD,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE;QAEzB,SAAS,IAAI,CAAC,UAAU,IAAI,mCAAQ,SAAS,CAAS;QACtD,MAAM,CAAC,CAAC,CAAC,CACR;YACE,8BACE,EAAE,EAAE,MAAM,EACV,SAAS,EAAC,gBAAgB,EAC1B,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI;gBAEX,8BAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,GAAG;gBAC3C,2BAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IACpC,QAAQ,CACP,CACC;YACP,8BACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,QAAQ,MAAM,GAAG,GACvB,CACD,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/CentralIconBase/index.tsx"],"names":[],"mappings":"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"}

package/README.md

@@ -91,6 +91,8 @@ function MyComponent() {
 
 ## Using transparent colors
 
+Each mounted icon has a unique mask ID, so repeated icons remain independent even when one is hidden with `display: none`. React 18+ uses `useId()` for IDs that also match during server rendering and hydration. Older React versions assign unique IDs after mounting; server-rendered icons retain shared IDs until hydration completes.
+
 Transparent colors work out of the box. Every icon is drawn through a mask and the color is painted once, so a semi-transparent `color` (or `currentColor` with an alpha channel) renders evenly — no darker overlaps:
 
 ```jsx

package/index.js

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/index.js
-size: 55685558 bytes
-sha256: c625bc22017952c9fbc46193349ad41e706c8a16ab70c6381de318774400c426
+size: 55686045 bytes
+sha256: 1265ed65119f351d1050f1122995e7f9afb3c3443199a1f2c73ff7a9d27184df

package/index.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/index.js.map
-size: 60514716 bytes
-sha256: 5751f99ddb61890bfcd61f2ab3b086c7ccc974237b1251972a34c4ab3cc7e5b4
+size: 60516395 bytes
+sha256: 02001f4a8da5f58d95fb4ba1248a0caa846b827582eaa15511167a1c02e9bc7e

package/index.mjs

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/index.mjs
-size: 55684841 bytes
-sha256: 8ed3c75b2ebe7728eeede28332dfff38f8be01234efdbf1c0343d5123867b756
+size: 55685272 bytes
+sha256: f69f670164f0c78a4e59bfa5a0bd39f55c503b168524b5a9b33b666eeccc0755

package/index.mjs.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/index.mjs.map
-size: 60514534 bytes
-sha256: 6d62fed172191b470261b34208f86360c80b8a32f78c70eed6c59e9b2438c6b8
+size: 60516183 bytes
+sha256: 1ad522994107122a85fb3553dc1192b7cd5313c41171cf1c2245cec435e9a764

package/license-check.js

@@ -18,7 +18,7 @@ const licenseCheck = async () => {
       },
       body: JSON.stringify({
         package: "central-icons-react/all",
-        version: "1.1.320",
+        version: "1.1.321",
       }),
       signal: controller.signal,
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-icons-react/all",
-  "version": "1.1.320",
+  "version": "1.1.321",
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://iconists.co/central",
   "bugs": {

package/skills/central-icons-react-all/SKILL.md

@@ -5,7 +5,7 @@ description: Use when inserting icons in React code that imports from @central-i
 
 # Central Icons — React (all)
 
-This skill helps you find and insert icons from the `@central-icons-react/all` package (version 1.1.320). The package exposes 2096 icons across 30 variants (round/square × filled/outlined × multiple corner radii and stroke widths) through a single dynamic `CentralIcon` component.
+This skill helps you find and insert icons from the `@central-icons-react/all` package (version 1.1.321). The package exposes 2096 icons across 30 variants (round/square × filled/outlined × multiple corner radii and stroke widths) through a single dynamic `CentralIcon` component.
 
 ## Prefer a variant package when possible