@primer/react-brand 0.73.0 → 0.74.0-rc.888ba09a

package/llms.txt

@@ -1,6 +1,6 @@
-# Primer Brand — @primer/react-brand v0.73.0
+# Primer Brand — @primer/react-brand v0.74.0-rc.888ba09a
 
-> Version-pinned documentation for @primer/react-brand v0.73.0, bundled with the installed package.
+> Version-pinned documentation for @primer/react-brand v0.74.0-rc.888ba09a, bundled with the installed package.
 > These docs match this exact release; prefer them over https://primer.style/brand when the
 > installed version differs from the latest. All links below are relative to this file.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react-brand",
-  "version": "0.73.0",
+  "version": "0.74.0-rc.888ba09a",
   "description": "Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.",
   "keywords": [
     "primer",

package/esm/Card/CardSkewEffect.d.ts

@@ -1,9 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { BaseProps } from '../component-helpers';
-type CardSkewEffectProps = {
-    perspective?: number;
-    disableSkew?: boolean;
-} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
-export declare const CardSkewEffect: ({ color, children, className, perspective, disableSkew, ...rest }: PropsWithChildren<CardSkewEffectProps>) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=CardSkewEffect.d.ts.map

package/esm/Card/CardSkewEffect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardSkewEffect.d.ts","sourceRoot":"","sources":["../../src/Card/CardSkewEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAoB,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAIjE,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAI9C,KAAK,mBAAmB,GAAG;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEtC,eAAO,MAAM,cAAc,GAAI,mEAO5B,iBAAiB,CAAC,mBAAmB,CAAC,4CAgExC,CAAA"}

package/esm/Card/CardSkewEffect.js

@@ -1,42 +0,0 @@
-import e from "../node_modules/clsx/dist/clsx.js";
-import { useTheme as t } from "../ThemeProvider/useTheme.js";
-import n from "./Card.module.js";
-import { useEffect as r, useRef as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/Card/CardSkewEffect.tsx
-var s = ({ color: s, children: c, className: l, perspective: u = 700, disableSkew: d = !1, ...f }) => {
-	let { colorMode: p } = t(), m = i(null), h = i(null);
-	return r(() => {
-		if (p === "light" || d) return;
-		let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = m.current, n = h.current;
-		if (!t) return;
-		let r = () => {
-			e.matches ? t.removeEventListener("mousemove", i) : t.addEventListener("mousemove", i);
-		}, i = (e) => {
-			let r = t.getBoundingClientRect(), i = n ? r.width - (e.clientX - r.left) - n.offsetWidth / 2 : 0, a = n ? r.height - (e.clientY - r.top) - n.offsetHeight / 2 : 0, o = -((e.clientX - r.left - r.width / 2) / r.width) * 3, s = (e.clientY - r.top - r.height / 2) / r.height * 2;
-			n && (n.style.transform = `translate(${-i}px, ${-a / 2}px)`), t.style.transform = `perspective(${u}px) rotateX(${Math.round(s * 100) / 100}deg) rotateY(${Math.round(o * 100) / 100}deg)`;
-		};
-		return e.addEventListener("change", r), t.addEventListener("mousemove", i), r(), () => {
-			t.removeEventListener("mousemove", i), n?.removeEventListener("mousemove", i), e.removeEventListener("change", r);
-		};
-	}, [
-		d,
-		u,
-		p
-	]), /* @__PURE__ */ a("div", {
-		ref: m,
-		className: e(n["Card--skew"], l),
-		...f,
-		children: /* @__PURE__ */ o("div", {
-			className: n["Card__skew-bounding"],
-			children: [c, /* @__PURE__ */ a("div", {
-				ref: h,
-				className: e(!d && n.Card__torch, n[`Card--skew-colorMode-${p}`])
-			})]
-		})
-	});
-};
-//#endregion
-export { s as CardSkewEffect };
-
-//# sourceMappingURL=CardSkewEffect.js.map

package/esm/Card/CardSkewEffect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardSkewEffect.js","names":[],"sources":["../../src/Card/CardSkewEffect.tsx"],"sourcesContent":["import React, {useRef, useEffect, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\n\nimport {useTheme} from '../'\nimport {BaseProps} from '../component-helpers'\n\nimport styles from './Card.module.css'\n\ntype CardSkewEffectProps = {\n  perspective?: number\n  disableSkew?: boolean\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nexport const CardSkewEffect = ({\n  color,\n  children,\n  className,\n  perspective = 700,\n  disableSkew = false,\n  ...rest\n}: PropsWithChildren<CardSkewEffectProps>) => {\n  const {colorMode} = useTheme()\n  const boundingRef = useRef<HTMLDivElement | null>(null)\n  const torchRef = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    if (colorMode === 'light' || disableSkew) return\n\n    const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)')\n\n    const boundingElement = boundingRef.current\n    const torchElement = torchRef.current\n\n    if (!boundingElement) {\n      return\n    }\n\n    const handleReducedMotionChange = () => {\n      if (motionQuery.matches) {\n        boundingElement.removeEventListener('mousemove', handleMouseMove)\n      } else {\n        boundingElement.addEventListener('mousemove', handleMouseMove)\n      }\n    }\n\n    const handleMouseMove = e => {\n      const rect = boundingElement.getBoundingClientRect()\n      const x = torchElement ? rect.width - (e.clientX - rect.left) - torchElement.offsetWidth / 2 : 0\n      const y = torchElement ? rect.height - (e.clientY - rect.top) - torchElement.offsetHeight / 2 : 0\n      const skewY = -((e.clientX - rect.left - rect.width / 2) / rect.width) * 3\n      const skewX = ((e.clientY - rect.top - rect.height / 2) / rect.height) * 2\n\n      if (torchElement) {\n        torchElement.style.transform = `translate(${-x}px, ${-y / 2}px)`\n      }\n\n      boundingElement.style.transform = `perspective(${perspective}px) rotateX(${\n        Math.round(skewX * 100) / 100\n      }deg) rotateY(${Math.round(skewY * 100) / 100}deg)`\n    }\n\n    motionQuery.addEventListener('change', handleReducedMotionChange)\n    boundingElement.addEventListener('mousemove', handleMouseMove)\n\n    handleReducedMotionChange()\n\n    return () => {\n      boundingElement.removeEventListener('mousemove', handleMouseMove)\n      torchElement?.removeEventListener('mousemove', handleMouseMove)\n      motionQuery.removeEventListener('change', handleReducedMotionChange)\n    }\n  }, [disableSkew, perspective, colorMode])\n\n  return (\n    <div ref={boundingRef} className={clsx(styles['Card--skew'], className)} {...rest}>\n      <div className={styles['Card__skew-bounding']}>\n        {children}\n        <div\n          ref={torchRef}\n          className={clsx(!disableSkew && styles.Card__torch, styles[`Card--skew-colorMode-${colorMode}`])}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAcA,IAAa,KAAkB,EAC7B,UACA,aACA,cACA,iBAAc,KACd,iBAAc,IACd,GAAG,QACyC;CAC5C,IAAM,EAAC,iBAAa,GAAU,EACxB,IAAc,EAA8B,KAAK,EACjD,IAAW,EAA8B,KAAK;AAkDpD,QAhDA,QAAgB;AACd,MAAI,MAAc,WAAW,EAAa;EAE1C,IAAM,IAAc,OAAO,WAAW,mCAAmC,EAEnE,IAAkB,EAAY,SAC9B,IAAe,EAAS;AAE9B,MAAI,CAAC,EACH;EAGF,IAAM,UAAkC;AACtC,GAAI,EAAY,UACd,EAAgB,oBAAoB,aAAa,EAAgB,GAEjE,EAAgB,iBAAiB,aAAa,EAAgB;KAI5D,KAAkB,MAAK;GAC3B,IAAM,IAAO,EAAgB,uBAAuB,EAC9C,IAAI,IAAe,EAAK,SAAS,EAAE,UAAU,EAAK,QAAQ,EAAa,cAAc,IAAI,GACzF,IAAI,IAAe,EAAK,UAAU,EAAE,UAAU,EAAK,OAAO,EAAa,eAAe,IAAI,GAC1F,IAAQ,GAAG,EAAE,UAAU,EAAK,OAAO,EAAK,QAAQ,KAAK,EAAK,SAAS,GACnE,KAAU,EAAE,UAAU,EAAK,MAAM,EAAK,SAAS,KAAK,EAAK,SAAU;AAMzE,GAJI,MACF,EAAa,MAAM,YAAY,aAAa,CAAC,EAAE,MAAM,CAAC,IAAI,EAAE,OAG9D,EAAgB,MAAM,YAAY,eAAe,EAAY,cAC3D,KAAK,MAAM,IAAQ,IAAI,GAAG,IAC3B,eAAe,KAAK,MAAM,IAAQ,IAAI,GAAG,IAAI;;AAQhD,SALA,EAAY,iBAAiB,UAAU,EAA0B,EACjE,EAAgB,iBAAiB,aAAa,EAAgB,EAE9D,GAA2B,QAEd;AAGX,GAFA,EAAgB,oBAAoB,aAAa,EAAgB,EACjE,GAAc,oBAAoB,aAAa,EAAgB,EAC/D,EAAY,oBAAoB,UAAU,EAA0B;;IAErE;EAAC;EAAa;EAAa;EAAU,CAAC,EAGvC,kBAAC,OAAD;EAAK,KAAK;EAAa,WAAW,EAAK,EAAO,eAAe,EAAU;EAAE,GAAI;YAC3E,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACG,GACD,kBAAC,OAAD;IACE,KAAK;IACL,WAAW,EAAK,CAAC,KAAe,EAAO,aAAa,EAAO,wBAAwB,KAAa;IAChG,CAAA,CACE;;EACF,CAAA"}

package/lib/Card/CardSkewEffect.d.ts

@@ -1,8 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { BaseProps } from '../component-helpers';
-type CardSkewEffectProps = {
-    perspective?: number;
-    disableSkew?: boolean;
-} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
-export declare const CardSkewEffect: ({ color, children, className, perspective, disableSkew, ...rest }: PropsWithChildren<CardSkewEffectProps>) => import("react/jsx-runtime").JSX.Element;
-export {};