@primer/styled-react 0.0.0-20251205154953 → 0.0.0-20251205165836

package/dist/components/ThemeProvider.js

@@ -1,150 +1,203 @@
-import { ThemeProvider } from "styled-components";
-import deepmerge from "deepmerge";
-import { theme, useId, useSyncedState } from "@primer/react";
-import React from "react";
-import ReactDOM from "react-dom";
-import { jsx, jsxs } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
+import { theme, useId, useSyncedState } from '@primer/react';
+import deepmerge from 'deepmerge';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-//#region src/components/ThemeProvider.tsx
-const defaultColorMode = "day";
-const defaultDayScheme = "light";
-const defaultNightScheme = "dark";
-const ThemeContext = /* @__PURE__ */ React.createContext({
-	setColorMode: () => null,
-	setDayScheme: () => null,
-	setNightScheme: () => null
+const defaultColorMode = 'day';
+const defaultDayScheme = 'light';
+const defaultNightScheme = 'dark';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const ThemeContext = /*#__PURE__*/React.createContext({
+  setColorMode: () => null,
+  setDayScheme: () => null,
+  setNightScheme: () => null
 });
-const getServerHandoff = (id) => {
-	try {
-		const serverData = document.getElementById(`__PRIMER_DATA_${id}__`)?.textContent;
-		if (serverData) return JSON.parse(serverData);
-	} catch (_error) {}
-	return {};
+
+// inspired from __NEXT_DATA__, we use application/json to avoid CSRF policy with inline scripts
+const getServerHandoff = id => {
+  try {
+    const serverData = document.getElementById(`__PRIMER_DATA_${id}__`)?.textContent;
+    if (serverData) return JSON.parse(serverData);
+  } catch (_error) {
+    // if document/element does not exist or JSON is invalid, supress error
+  }
+  return {};
 };
-const ThemeProvider$1 = ({ children, ...props }) => {
-	const { theme: fallbackTheme, colorMode: fallbackColorMode, dayScheme: fallbackDayScheme, nightScheme: fallbackNightScheme } = useTheme();
-	const theme$1 = props.theme ?? fallbackTheme ?? theme;
-	const uniqueDataId = useId();
-	const { resolvedServerColorMode } = getServerHandoff(uniqueDataId);
-	const resolvedColorModePassthrough = React.useRef(resolvedServerColorMode);
-	const [colorMode, setColorMode] = useSyncedState(props.colorMode ?? fallbackColorMode ?? defaultColorMode);
-	const [dayScheme, setDayScheme] = useSyncedState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme);
-	const [nightScheme, setNightScheme] = useSyncedState(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme);
-	const systemColorMode = useSystemColorMode();
-	const resolvedColorMode = resolvedColorModePassthrough.current || resolveColorMode(colorMode, systemColorMode);
-	const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
-	const { resolvedTheme, resolvedColorScheme } = React.useMemo(() => applyColorScheme(theme$1, colorScheme), [theme$1, colorScheme]);
-	React.useEffect(function updateColorModeAfterServerPassthrough() {
-		const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode);
-		if (resolvedColorModePassthrough.current) {
-			if (resolvedColorModePassthrough.current !== resolvedColorModeOnClient) window.setTimeout(() => {
-				ReactDOM.flushSync(() => {
-					setColorMode(resolvedColorModeOnClient);
-				});
-				setColorMode(colorMode);
-			});
-			resolvedColorModePassthrough.current = null;
-		}
-	}, [
-		colorMode,
-		systemColorMode,
-		setColorMode
-	]);
-	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-		value: {
-			theme: resolvedTheme,
-			colorScheme,
-			colorMode,
-			resolvedColorMode,
-			resolvedColorScheme,
-			dayScheme,
-			nightScheme,
-			setColorMode,
-			setDayScheme,
-			setNightScheme
-		},
-		children: /* @__PURE__ */ jsxs(ThemeProvider, {
-			theme: resolvedTheme,
-			children: [children, props.preventSSRMismatch ? /* @__PURE__ */ jsx("script", {
-				type: "application/json",
-				id: `__PRIMER_DATA_${uniqueDataId}__`,
-				dangerouslySetInnerHTML: { __html: JSON.stringify({ resolvedServerColorMode: resolvedColorMode }) }
-			}) : null]
-		})
-	});
+const ThemeProvider = ({
+  children,
+  ...props
+}) => {
+  // Get fallback values from parent ThemeProvider (if exists)
+  const {
+    theme: fallbackTheme,
+    colorMode: fallbackColorMode,
+    dayScheme: fallbackDayScheme,
+    nightScheme: fallbackNightScheme
+  } = useTheme();
+
+  // Initialize state
+  const theme$1 = props.theme ?? fallbackTheme ?? theme;
+  const uniqueDataId = useId();
+  const {
+    resolvedServerColorMode
+  } = getServerHandoff(uniqueDataId);
+  const resolvedColorModePassthrough = React.useRef(resolvedServerColorMode);
+  const [colorMode, setColorMode] = useSyncedState(props.colorMode ?? fallbackColorMode ?? defaultColorMode);
+  const [dayScheme, setDayScheme] = useSyncedState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme);
+  const [nightScheme, setNightScheme] = useSyncedState(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme);
+  const systemColorMode = useSystemColorMode();
+  // eslint-disable-next-line react-hooks/refs
+  const resolvedColorMode = resolvedColorModePassthrough.current || resolveColorMode(colorMode, systemColorMode);
+  const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
+  const {
+    resolvedTheme,
+    resolvedColorScheme
+  } = React.useMemo(() => applyColorScheme(theme$1, colorScheme), [theme$1, colorScheme]);
+
+  // this effect will only run on client
+  React.useEffect(function updateColorModeAfterServerPassthrough() {
+    const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode);
+    if (resolvedColorModePassthrough.current) {
+      // if the resolved color mode passed on from the server is not the resolved color mode on client, change it!
+      if (resolvedColorModePassthrough.current !== resolvedColorModeOnClient) {
+        window.setTimeout(() => {
+          // use ReactDOM.flushSync to prevent automatic batching of state updates since React 18
+          // ref: https://github.com/reactwg/react-18/discussions/21
+          ReactDOM.flushSync(() => {
+            // override colorMode to whatever is resolved on the client to get a re-render
+            setColorMode(resolvedColorModeOnClient);
+          });
+
+          // immediately after that, set the colorMode to what the user passed to respond to system color mode changes
+          setColorMode(colorMode);
+        });
+      }
+      resolvedColorModePassthrough.current = null;
+    }
+  }, [colorMode, systemColorMode, setColorMode]);
+  return /*#__PURE__*/jsx(ThemeContext.Provider, {
+    value: {
+      theme: resolvedTheme,
+      colorScheme,
+      colorMode,
+      resolvedColorMode,
+      resolvedColorScheme,
+      dayScheme,
+      nightScheme,
+      setColorMode,
+      setDayScheme,
+      setNightScheme
+    },
+    children: /*#__PURE__*/jsxs(ThemeProvider$1, {
+      theme: resolvedTheme,
+      children: [children, props.preventSSRMismatch ? /*#__PURE__*/jsx("script", {
+        type: "application/json",
+        id: `__PRIMER_DATA_${uniqueDataId}__`,
+        dangerouslySetInnerHTML: {
+          __html: JSON.stringify({
+            resolvedServerColorMode: resolvedColorMode
+          })
+        }
+      }) : null]
+    })
+  });
 };
 function useTheme() {
-	return React.useContext(ThemeContext);
+  return React.useContext(ThemeContext);
 }
 function useColorSchemeVar(values, fallback) {
-	const { colorScheme = "" } = useTheme();
-	return values[colorScheme] ?? fallback;
+  const {
+    colorScheme = ''
+  } = useTheme();
+  return values[colorScheme] ?? fallback;
 }
 function useSystemColorMode() {
-	const [systemColorMode, setSystemColorMode] = React.useState(getSystemColorMode);
-	React.useEffect(() => {
-		const media = window?.matchMedia?.("(prefers-color-scheme: dark)");
-		function matchesMediaToColorMode(matches) {
-			return matches ? "night" : "day";
-		}
-		function handleChange(event) {
-			const isNight = event.matches;
-			setSystemColorMode(matchesMediaToColorMode(isNight));
-		}
-		if (media) {
-			const isNight = media.matches;
-			setSystemColorMode(matchesMediaToColorMode(isNight));
-			if (media.addEventListener !== void 0) {
-				media.addEventListener("change", handleChange);
-				return function cleanup() {
-					media.removeEventListener("change", handleChange);
-				};
-			} else if (media.addListener !== void 0) {
-				media.addListener(handleChange);
-				return function cleanup() {
-					media.removeListener(handleChange);
-				};
-			}
-		}
-	}, []);
-	return systemColorMode;
+  const [systemColorMode, setSystemColorMode] = React.useState(getSystemColorMode);
+  React.useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const media = window?.matchMedia?.('(prefers-color-scheme: dark)');
+    function matchesMediaToColorMode(matches) {
+      return matches ? 'night' : 'day';
+    }
+    function handleChange(event) {
+      const isNight = event.matches;
+      setSystemColorMode(matchesMediaToColorMode(isNight));
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (media) {
+      // just in case the preference changed before the event listener was attached
+      const isNight = media.matches;
+      setSystemColorMode(matchesMediaToColorMode(isNight));
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (media.addEventListener !== undefined) {
+        media.addEventListener('change', handleChange);
+        return function cleanup() {
+          media.removeEventListener('change', handleChange);
+        };
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      else if (media.addListener !== undefined) {
+        media.addListener(handleChange);
+        return function cleanup() {
+          media.removeListener(handleChange);
+        };
+      }
+    }
+  }, []);
+  return systemColorMode;
 }
 function getSystemColorMode() {
-	if (typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)")?.matches) return "night";
-	return "day";
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)')?.matches) {
+    return 'night';
+  }
+  return 'day';
 }
 function resolveColorMode(colorMode, systemColorMode) {
-	switch (colorMode) {
-		case "auto": return systemColorMode;
-		default: return colorMode;
-	}
+  switch (colorMode) {
+    case 'auto':
+      return systemColorMode;
+    default:
+      return colorMode;
+  }
 }
 function chooseColorScheme(colorMode, dayScheme, nightScheme) {
-	switch (colorMode) {
-		case "day":
-		case "light": return dayScheme;
-		case "dark":
-		case "night": return nightScheme;
-	}
+  switch (colorMode) {
+    case 'day':
+    case 'light':
+      return dayScheme;
+    case 'dark':
+    case 'night':
+      return nightScheme;
+  }
 }
-function applyColorScheme(theme$1, colorScheme) {
-	if (!theme$1.colorSchemes) return {
-		resolvedTheme: theme$1,
-		resolvedColorScheme: void 0
-	};
-	if (!theme$1.colorSchemes[colorScheme]) {
-		console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``);
-		const defaultColorScheme = Object.keys(theme$1.colorSchemes)[0];
-		return {
-			resolvedTheme: deepmerge(theme$1, theme$1.colorSchemes[defaultColorScheme]),
-			resolvedColorScheme: defaultColorScheme
-		};
-	}
-	return {
-		resolvedTheme: deepmerge(theme$1, theme$1.colorSchemes[colorScheme]),
-		resolvedColorScheme: colorScheme
-	};
+function applyColorScheme(theme, colorScheme) {
+  if (!theme.colorSchemes) {
+    return {
+      resolvedTheme: theme,
+      resolvedColorScheme: undefined
+    };
+  }
+  if (!theme.colorSchemes[colorScheme]) {
+    // eslint-disable-next-line no-console
+    console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``);
+
+    // Apply the first defined color scheme
+    const defaultColorScheme = Object.keys(theme.colorSchemes)[0];
+    return {
+      resolvedTheme: deepmerge(theme, theme.colorSchemes[defaultColorScheme]),
+      resolvedColorScheme: defaultColorScheme
+    };
+  }
+  return {
+    resolvedTheme: deepmerge(theme, theme.colorSchemes[colorScheme]),
+    resolvedColorScheme: colorScheme
+  };
 }
 
-//#endregion
-export { ThemeProvider$1 as ThemeProvider, useColorSchemeVar, useTheme };
+export { ThemeProvider, ThemeProvider as default, defaultColorMode, useColorSchemeVar, useTheme };

package/dist/components/Timeline.js

@@ -1,49 +1,47 @@
-import { Box } from "./Box.js";
-import { Timeline } from "@primer/react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Timeline as Timeline$1 } from '@primer/react';
+import Box from './Box.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
 
-//#region src/components/Timeline.tsx
-const TimelineImpl = /* @__PURE__ */ forwardRef(function Timeline$2(props, ref) {
-	return /* @__PURE__ */ jsx(Box, {
-		as: Timeline,
-		ref,
-		...props
-	});
+const TimelineImpl = /*#__PURE__*/forwardRef(function Timeline(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Timeline$1,
+    ref: ref,
+    ...props
+  });
 });
-const TimelineItem = /* @__PURE__ */ forwardRef(function TimelineItem$1(props, ref) {
-	return /* @__PURE__ */ jsx(Box, {
-		as: Timeline.Item,
-		ref,
-		...props
-	});
+const TimelineItem = /*#__PURE__*/forwardRef(function TimelineItem(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Timeline$1.Item,
+    ref: ref,
+    ...props
+  });
 });
 function TimelineBadge(props) {
-	return /* @__PURE__ */ jsx(Box, {
-		as: Timeline.Badge,
-		...props
-	});
+  return /*#__PURE__*/jsx(Box, {
+    as: Timeline$1.Badge,
+    ...props
+  });
 }
-const TimelineBody = /* @__PURE__ */ forwardRef(function TimelineBody$1(props, ref) {
-	return /* @__PURE__ */ jsx(Box, {
-		as: Timeline.Body,
-		ref,
-		...props
-	});
+const TimelineBody = /*#__PURE__*/forwardRef(function TimelineBody(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Timeline$1.Body,
+    ref: ref,
+    ...props
+  });
 });
-const TimelineBreak = /* @__PURE__ */ forwardRef(function TimelineBreak$1(props, ref) {
-	return /* @__PURE__ */ jsx(Box, {
-		as: Timeline.Break,
-		ref,
-		...props
-	});
+const TimelineBreak = /*#__PURE__*/forwardRef(function TimelineBreak(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Timeline$1.Break,
+    ref: ref,
+    ...props
+  });
 });
-const Timeline$1 = Object.assign(TimelineImpl, {
-	Item: TimelineItem,
-	Badge: TimelineBadge,
-	Body: TimelineBody,
-	Break: TimelineBreak
+const Timeline = Object.assign(TimelineImpl, {
+  Item: TimelineItem,
+  Badge: TimelineBadge,
+  Body: TimelineBody,
+  Break: TimelineBreak
 });
 
-//#endregion
-export { Timeline$1 as Timeline };
+export { Timeline };

package/dist/components/ToggleSwitch.js

@@ -1,16 +1,14 @@
-import { Box } from "./Box.js";
-import { ToggleSwitch } from "@primer/react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { ToggleSwitch as ToggleSwitch$1 } from '@primer/react';
+import { forwardRef } from 'react';
+import Box from './Box.js';
+import { jsx } from 'react/jsx-runtime';
 
-//#region src/components/ToggleSwitch.tsx
-const ToggleSwitch$1 = /* @__PURE__ */ forwardRef(function ToggleSwitch$2(props, ref) {
-	return /* @__PURE__ */ jsx(Box, {
-		as: ToggleSwitch,
-		ref,
-		...props
-	});
+const ToggleSwitch = /*#__PURE__*/forwardRef(function ToggleSwitch(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: ToggleSwitch$1,
+    ref: ref,
+    ...props
+  });
 });
 
-//#endregion
-export { ToggleSwitch$1 as ToggleSwitch };
+export { ToggleSwitch };

package/dist/components/Token.js

@@ -1,21 +1,26 @@
-import { sx } from "../sx.js";
-import styled from "styled-components";
-import { Token } from "@primer/react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Token as Token$1 } from '@primer/react';
+import sx from '../sx.js';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
 
-//#region src/components/Token.tsx
-const StyledToken = styled(Token).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "Token__StyledToken",
-	componentId: "sc-ldn0r8-0"
+const StyledToken = styled(Token$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Token__StyledToken",
+  componentId: "sc-ldn0r8-0"
 })(["", ""], sx);
-const Token$1 = /* @__PURE__ */ forwardRef(({ as, ...props }, ref) => {
-	return /* @__PURE__ */ jsx(StyledToken, {
-		...props,
-		...as ? { forwardedAs: as } : {},
-		ref
-	});
+const Token = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(StyledToken, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
 });
 
-//#endregion
-export { Token$1 as Token };
+export { Token };

package/dist/components/Tooltip.js

@@ -1,17 +1,15 @@
-import { Box } from "./Box.js";
-import { Tooltip } from "@primer/react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Tooltip as Tooltip$1 } from '@primer/react';
+import Box from './Box.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
 
-//#region src/components/Tooltip.tsx
-const Tooltip$1 = /* @__PURE__ */ forwardRef(function Tooltip$2(props, ref) {
-	return /* @__PURE__ */ jsx(Box, {
-		as: Tooltip,
-		ref,
-		...props
-	});
+const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Tooltip$1,
+    ref: ref,
+    ...props
+  });
 });
-Tooltip$1.__SLOT__ = Tooltip.__SLOT__;
+Tooltip.__SLOT__ = Tooltip$1.__SLOT__;
 
-//#endregion
-export { Tooltip$1 as Tooltip };
+export { Tooltip };

package/dist/components/Truncate.js

@@ -1,12 +1,12 @@
-import { sx } from "../sx.js";
-import styled from "styled-components";
-import { Truncate } from "@primer/react";
+import { Truncate as Truncate$1 } from '@primer/react';
+import sx from '../sx.js';
+import styled from 'styled-components';
 
-//#region src/components/Truncate.tsx
-const Truncate$1 = styled(Truncate).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "Truncate",
-	componentId: "sc-x3i4it-0"
+const Truncate = styled(Truncate$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Truncate",
+  componentId: "sc-x3i4it-0"
 })(["", ""], sx);
 
-//#endregion
-export { Truncate$1 as Truncate };
+export { Truncate };

package/dist/components/UnderlineNav.js

@@ -1,33 +1,45 @@
-import { sx } from "../sx.js";
-import { Box } from "./Box.js";
-import styled from "styled-components";
-import { UnderlineNav } from "@primer/react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { UnderlineNav as UnderlineNav$1 } from '@primer/react';
+import Box from './Box.js';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import sx from '../sx.js';
+import { jsx } from 'react/jsx-runtime';
 
-//#region src/components/UnderlineNav.tsx
-const StyledUnderlineNav = /* @__PURE__ */ forwardRef(function UnderlineNav$2(props, ref) {
-	return /* @__PURE__ */ jsx(Box, {
-		as: UnderlineNav,
-		ref,
-		...props
-	});
+const StyledUnderlineNav = /*#__PURE__*/forwardRef(function UnderlineNav(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: UnderlineNav$1,
+    ref: ref,
+    ...props
+  });
 });
-const UnderlineNavImpl = /* @__PURE__ */ forwardRef(({ as, ...props }, ref) => /* @__PURE__ */ jsx(StyledUnderlineNav, {
-	...props,
-	...as ? { forwardedAs: as } : {},
-	ref
+const UnderlineNavImpl = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledUnderlineNav, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
 }));
-const StyledUnderlineNavItem = styled(UnderlineNav.Item).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "UnderlineNav__StyledUnderlineNavItem",
-	componentId: "sc-dx6br2-0"
+const StyledUnderlineNavItem = styled(UnderlineNav$1.Item).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "UnderlineNav__StyledUnderlineNavItem",
+  componentId: "sc-dx6br2-0"
 })(["", ""], sx);
-const UnderlineNavItem = /* @__PURE__ */ forwardRef(({ as, ...props }, ref) => /* @__PURE__ */ jsx(StyledUnderlineNavItem, {
-	...props,
-	...as ? { forwardedAs: as } : {},
-	ref
+const UnderlineNavItem = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledUnderlineNavItem, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
 }));
-const UnderlineNav$1 = Object.assign(UnderlineNavImpl, { Item: UnderlineNavItem });
+const UnderlineNav = Object.assign(UnderlineNavImpl, {
+  Item: UnderlineNavItem
+});
 
-//#endregion
-export { UnderlineNav$1 as UnderlineNav };
+export { UnderlineNav, UnderlineNavImpl, UnderlineNavItem };