@primer/octovisuals-react 0.3.0 → 0.3.1-rc.40bc48a

package/dist/icons/WorkflowIcon.js

@@ -1,8 +1,9 @@
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/icons/WorkflowIcon.tsx
-var WorkflowIcon = forwardRef(function WorkflowIcon({ size, "aria-label": ariaLabel, ...props }, ref) {
-	return /* @__PURE__ */ jsxs("svg", {
+var ANIMATION_STYLE = "@keyframes octovisual-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes octovisual-fade{from{opacity:0}to{opacity:1}}[data-octovisual-animation] path[stroke]{stroke-dasharray:1;stroke-dashoffset:1;animation:octovisual-draw 1s cubic-bezier(0.22,1,0.36,1) forwards}[data-octovisual-animation] path:not([stroke]){opacity:0;animation:octovisual-fade 0.5s cubic-bezier(0.22,1,0.36,1) 0.3s forwards}@media(prefers-reduced-motion:reduce){[data-octovisual-animation] path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}";
+var WorkflowIcon = forwardRef(function WorkflowIcon({ size, "aria-label": ariaLabel, animate, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [animate && /* @__PURE__ */ jsx("style", { children: ANIMATION_STYLE }), /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: size ?? 96,
 		height: size ?? 96,
@@ -11,14 +12,17 @@ var WorkflowIcon = forwardRef(function WorkflowIcon({ size, "aria-label": ariaLa
 		"aria-hidden": ariaLabel ? void 0 : true,
 		"aria-label": ariaLabel,
 		role: ariaLabel ? "img" : void 0,
+		"data-octovisual-animation": animate ? "" : void 0,
 		ref,
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("path", {
+				pathLength: 1,
 				fill: "currentColor",
 				d: "M24.6611 59V44C24.6611 42.8954 25.5566 42 26.6611 42C27.7657 42 28.6611 42.8954 28.6611 44V59L28.666 59.3613C28.8577 66.9263 35.05 73 42.6611 73H51.6611C52.7657 73 53.6611 73.8954 53.6611 75C53.6611 76.1046 52.7657 77 51.6611 77H42.6611C32.8754 77 24.9135 69.1911 24.667 59.4648L24.6611 59Z"
 			}),
 			/* @__PURE__ */ jsx("path", {
+				pathLength: 1,
 				fill: "currentColor",
 				d: "M92.373 60C92.373 56.7898 89.8519 54.1684 86.6816 54.0078L86.373 54H60.373C57.0593 54 54.373 56.6863 54.373 60V86L54.3809 86.3086C54.5415 89.4789 57.1628 92 60.373 92H86.373C89.6868 92 92.373 89.3137 92.373 86V60ZM96.373 86C96.373 91.5228 91.8959 96 86.373 96H60.373C55.0228 96 50.6536 91.7983 50.3857 86.5146L50.373 86V60C50.373 54.4772 54.8502 50 60.373 50H86.373L86.8877 50.0127C92.1714 50.2805 96.373 54.6498 96.373 60V86Z"
 			}),
@@ -76,7 +80,7 @@ var WorkflowIcon = forwardRef(function WorkflowIcon({ size, "aria-label": ariaLa
 				transform: "rotate(180 18 36)"
 			})
 		]
-	});
+	})] });
 });
 WorkflowIcon.displayName = "WorkflowIcon";
 //#endregion

package/dist/icons/ZapIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZapIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ZapIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,OAAO,wHAMX,CAAC;AAEH,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"ZapIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ZapIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,QAAA,MAAM,OAAO,wHAOX,CAAC;AAEH,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/icons/ZapIcon.js

@@ -1,8 +1,9 @@
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/icons/ZapIcon.tsx
-var ZapIcon = forwardRef(function ZapIcon({ size, "aria-label": ariaLabel, ...props }, ref) {
-	return /* @__PURE__ */ jsxs("svg", {
+var ANIMATION_STYLE = "@keyframes octovisual-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes octovisual-fade{from{opacity:0}to{opacity:1}}[data-octovisual-animation] path[stroke]{stroke-dasharray:1;stroke-dashoffset:1;animation:octovisual-draw 1s cubic-bezier(0.22,1,0.36,1) forwards}[data-octovisual-animation] path:not([stroke]){opacity:0;animation:octovisual-fade 0.5s cubic-bezier(0.22,1,0.36,1) 0.3s forwards}@media(prefers-reduced-motion:reduce){[data-octovisual-animation] path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}";
+var ZapIcon = forwardRef(function ZapIcon({ size, "aria-label": ariaLabel, animate, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [animate && /* @__PURE__ */ jsx("style", { children: ANIMATION_STYLE }), /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: size ?? 96,
 		height: size ?? 96,
@@ -11,10 +12,12 @@ var ZapIcon = forwardRef(function ZapIcon({ size, "aria-label": ariaLabel, ...pr
 		"aria-hidden": ariaLabel ? void 0 : true,
 		"aria-label": ariaLabel,
 		role: ariaLabel ? "img" : void 0,
+		"data-octovisual-animation": animate ? "" : void 0,
 		ref,
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("path", {
+				pathLength: 1,
 				stroke: "currentColor",
 				strokeLinecap: "round",
 				strokeMiterlimit: 10,
@@ -22,19 +25,22 @@ var ZapIcon = forwardRef(function ZapIcon({ size, "aria-label": ariaLabel, ...pr
 				d: "M87.7819 36.9052H60L69.9218 7.30407C71.2282 3.40672 66.5117 0.310112 63.4549 3.05825L5.75778 54.9306C3.03084 57.3822 4.76509 61.9052 8.43207 61.9052H38L28.9784 90.5461C27.7462 94.4579 32.4978 97.4691 35.5092 94.6848L90.4974 43.8421C93.1698 41.3712 91.4215 36.9052 87.7819 36.9052Z"
 			}),
 			/* @__PURE__ */ jsx("path", {
+				pathLength: 1,
 				fill: "#96A199",
 				d: "M24 0.905151C27.3137 0.905151 30 3.59144 30 6.90515C29.9999 10.2187 27.314 12.905 24.0005 12.9052C20.6868 12.9052 18.0001 10.2188 18 6.90515C18 3.59152 20.6864 0.905283 24 0.905151Z"
 			}),
 			/* @__PURE__ */ jsx("path", {
+				pathLength: 1,
 				fill: "#96A199",
 				d: "M11 82.9052C14.3137 82.9052 17 85.5914 17 88.9052C16.9999 92.2187 14.314 94.905 11.0005 94.9052C7.68683 94.9052 5.00008 92.2188 5 88.9052C5 85.5915 7.6864 82.9053 11 82.9052Z"
 			}),
 			/* @__PURE__ */ jsx("path", {
+				pathLength: 1,
 				fill: "#96A199",
 				d: "M90 56.9052C93.3137 56.9052 96 59.5914 96 62.9052C95.9999 66.2187 93.314 68.905 90.0005 68.9052C86.6868 68.9052 84.0001 66.2188 84 62.9052C84 59.5915 86.6864 56.9053 90 56.9052Z"
 			})
 		]
-	});
+	})] });
 });
 ZapIcon.displayName = "ZapIcon";
 //#endregion

package/dist/types.d.ts

@@ -2,14 +2,18 @@ import type { SVGProps } from "react";
 export type OctovisualProps = Omit<SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> & {
     /**
      * Icon size in pixels. Defaults to the icon's native size (96).
-     * Accepts a number (pixels) or a string (e.g. "2rem").
      */
-    size?: number | string;
+    size?: number;
     /**
      * Accessible label for the icon.
      * When provided, the icon gets `role="img"` and an `aria-label`.
      * When omitted, the icon is decorative and gets `aria-hidden="true"`.
      */
     "aria-label"?: string;
+    /**
+     * Use animate to play an initial reveal animation.
+     * Defaults to false.
+     */
+    animate?: boolean;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAA;AAEnC,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,QAAQ,CAAC,aAAa,CAAC,EACvB,UAAU,GAAG,yBAAyB,CACvC,GAAG;IACF;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAA;AAEnC,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,QAAQ,CAAC,aAAa,CAAC,EACvB,UAAU,GAAG,yBAAyB,CACvC,GAAG;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/octovisuals-react",
-  "version": "0.3.0",
+  "version": "0.3.1-rc.40bc48a",
   "description": "React components for Primer Octovisuals illustrative icons",
   "keywords": [
     "github",