@hopper-ui/styled-system 0.2.1 → 0.2.2

package/dist/chunk-LU33LZMJ.js

@@ -0,0 +1,55 @@
+import { BreakpointContext } from './chunk-ZUVKM5DV.js';
+import { Breakpoints } from './chunk-XUHDFZZL.js';
+import { supportsMatchMedia } from './chunk-STEDL5VQ.js';
+import { useCallback, useState, useEffect } from 'react';
+import { useIsSSR } from 'react-aria';
+import { jsx } from 'react/jsx-runtime';
+
+var DefaultUnsupportedMatchMediaBreakpoint = "lg";
+function BreakpointProvider({
+  children,
+  unsupportedMatchMediaBreakpoint = DefaultUnsupportedMatchMediaBreakpoint
+}) {
+  const matchedBreakpoints = useMatchedBreakpoints(unsupportedMatchMediaBreakpoint);
+  return /* @__PURE__ */ jsx(BreakpointContext.Provider, { value: { matchedBreakpoints }, children });
+}
+function useMatchedBreakpoints(unsupportedMatchMediaBreakpoint = DefaultUnsupportedMatchMediaBreakpoint) {
+  const getBreakpointHandler = useCallback(() => {
+    const entries = Object.entries(Breakpoints).sort(([, valueA], [, valueB]) => valueB - valueA);
+    const breakpointQueries = entries.map(([, value]) => `(min-width: ${value}px)`);
+    const matched = [];
+    for (const i in breakpointQueries) {
+      const query = breakpointQueries[i];
+      if (window.matchMedia(query).matches) {
+        matched.push(entries[i][0]);
+      }
+    }
+    matched.push("base");
+    return matched;
+  }, []);
+  const [matchedBreakpoints, setMatchedBreakpoints] = useState(
+    supportsMatchMedia ? getBreakpointHandler() : [unsupportedMatchMediaBreakpoint]
+  );
+  useEffect(() => {
+    if (!supportsMatchMedia) {
+      return;
+    }
+    const handleResize = () => {
+      const breakpointHandler = getBreakpointHandler();
+      setMatchedBreakpoints((previousMatchedBreakpoints) => {
+        if (previousMatchedBreakpoints.length !== breakpointHandler.length || previousMatchedBreakpoints.some((breakpoint, idx) => breakpoint !== breakpointHandler[idx])) {
+          return [...breakpointHandler];
+        }
+        return previousMatchedBreakpoints;
+      });
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [getBreakpointHandler]);
+  const isSSR = useIsSSR();
+  return isSSR ? [unsupportedMatchMediaBreakpoint] : matchedBreakpoints;
+}
+
+export { BreakpointProvider, DefaultUnsupportedMatchMediaBreakpoint };

package/dist/chunk-OHW5NUAW.js

@@ -0,0 +1,59 @@
+import { useIsomorphicLayoutEffect } from './chunk-3YM73BQP.js';
+import { ThemeComputedStyle } from './chunk-JQBON2KA.js';
+import { useInsertStyleElement } from './chunk-JBWKRDVA.js';
+import { StyledSystemRootCssClass } from './chunk-ZQUJDDQL.js';
+import { isNil } from './chunk-U5R6ZXH3.js';
+import { useColorSchemeContext } from './chunk-V7X6ANEM.js';
+import { useRef, useState } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var BodyTokens = {
+  color: "--hop-neutral-text",
+  backgroundColor: "--hop-neutral-surface",
+  lineHeight: "--hop-body-md-line-height",
+  fontFamily: "--hop-body-md-font-family",
+  fontSize: "--hop-body-md-font-size"
+};
+function BodyStyleProvider() {
+  const ref = useRef(null);
+  const { colorScheme } = useColorSchemeContext();
+  const [cosmeticStyles, setCosmeticStyles] = useState(void 0);
+  useIsomorphicLayoutEffect(() => {
+    if (ref.current) {
+      const computedStyle = new ThemeComputedStyle(ref, `.${StyledSystemRootCssClass}`);
+      const color = computedStyle.getPropertyValue(BodyTokens.color);
+      const backgroundColor = computedStyle.getPropertyValue(BodyTokens.backgroundColor);
+      const fontFamily = computedStyle.getPropertyValue(BodyTokens.fontFamily);
+      const lineHeight = computedStyle.getPropertyValue(BodyTokens.lineHeight);
+      const fontSize = computedStyle.getPropertyValue(BodyTokens.fontSize);
+      setCosmeticStyles({ colorScheme, color, backgroundColor, lineHeight, fontFamily, fontSize });
+    }
+  }, [ref, colorScheme]);
+  useInsertStyleElement(
+    `hop-body-styles-${StyledSystemRootCssClass}`,
+    isNil(cosmeticStyles) ? "" : generateBodyCssContent(cosmeticStyles)
+  );
+  return /* @__PURE__ */ jsx("div", { ref });
+}
+function generateBodyCssContent({ color, backgroundColor, fontFamily, lineHeight, fontSize }) {
+  return `
+            body {
+                -webkit-font-smoothing: antialiased;
+                font-family: ${fontFamily}, Arial, sans-serif;
+                line-height: ${lineHeight};
+                font-size: ${fontSize};
+                color: ${color};
+                background-color: ${backgroundColor};
+                margin: 0;
+                padding: 0;
+            }
+
+            @media not (prefers-reduced-motion) {
+                body {
+                    scroll-behavior: smooth;
+                }
+            }
+        `;
+}
+
+export { BodyStyleProvider };