@hopper-ui/styled-system 0.2.1 → 0.2.3

package/dist/chunk-QWLE5PCU.js

@@ -0,0 +1,29 @@
+import { useStyledSystem } from './chunk-O7PTTVQH.js';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./htmlElement.module.css#css-module
+var htmlElement_module_default = { "html-element": "htmlElement-module__html-element___JSyz-" };
+function htmlElement(elementType) {
+  return forwardRef((props, ref) => {
+    const { className, children, ...rest } = useStyledSystem(props);
+    const As = elementType;
+    const classNames = clsx(
+      className,
+      htmlElement_module_default["html-element"],
+      `hop-html-${elementType}`
+      // this selector is not used, but could be used as a selector for the element type wrapper
+    );
+    return (
+      // It's too hard for typescript, a generic elementType, with generic props.
+      // Basically, the interface is HTMLProps of the elementType + styled system props.
+      // useStyledSystem removes the styled system props, so what is remaining is valid for the elementType.
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      /* @__PURE__ */ jsx(As, { ref, className: classNames, ...rest, children })
+    );
+  });
+}
+
+export { htmlElement };

package/dist/chunk-RIORU7JO.js

@@ -0,0 +1,28 @@
+import { useIsomorphicInsertionEffect } from './chunk-YPIK2HRL.js';
+import { isNil } from './chunk-U5R6ZXH3.js';
+
+// src/utils/useInsertStyleElement.ts
+function useInsertStyleElement(elementId, cssContent, allowUpdates = true) {
+  useIsomorphicInsertionEffect(() => {
+    let element = document.getElementById(elementId);
+    if (isNil(element)) {
+      if (!isNil(cssContent)) {
+        element = document.createElement("style");
+        element.id = elementId;
+        document.head.appendChild(element);
+        element.innerText = formatInlineCss(cssContent);
+        return () => {
+          element == null ? void 0 : element.remove();
+        };
+      }
+    } else if (allowUpdates) {
+      element.innerText = formatInlineCss(cssContent);
+    }
+  }, [elementId, cssContent]);
+}
+function formatInlineCss(str) {
+  var _a;
+  return (_a = str == null ? void 0 : str.replace(/(\r\n|\n|\r|\s\s)/gm, "")) != null ? _a : "";
+}
+
+export { useInsertStyleElement };

package/dist/chunk-S33PIM5T.js

@@ -0,0 +1,41 @@
+import { Div } from './chunk-ZFDLWGCR.js';
+import { BodyStyleProvider } from './chunk-GRF2SIQE.js';
+import { BreakpointProvider, DefaultUnsupportedMatchMediaBreakpoint } from './chunk-LU33LZMJ.js';
+import { TokenProvider } from './chunk-BEEGWFNF.js';
+import { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-JM7JTLPS.js';
+import { useColorScheme } from './chunk-XTX4KVWI.js';
+import { ColorSchemeContext } from './chunk-V7X6ANEM.js';
+import clsx from 'clsx';
+import { useState, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function StyledSystemProvider({ children, withBodyStyle = false, withCssVariables = true, colorScheme = "light", defaultColorScheme = "light", unsupportedMatchMediaBreakpoint = DefaultUnsupportedMatchMediaBreakpoint, className, ...rest }) {
+  const [remoteColorScheme, setRemoteColorScheme] = useState();
+  const computedColorScheme = useColorScheme(remoteColorScheme != null ? remoteColorScheme : colorScheme, defaultColorScheme);
+  const setColorScheme = useCallback((newColorScheme) => {
+    setRemoteColorScheme(newColorScheme);
+  }, [setRemoteColorScheme]);
+  const classNames = clsx(
+    HopperRootCssClass,
+    `${HopperRootCssClass}-${computedColorScheme}`,
+    StyledSystemRootCssClass,
+    `${StyledSystemRootCssClass}-${computedColorScheme}`,
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    ColorSchemeContext.Provider,
+    {
+      value: {
+        colorScheme: computedColorScheme,
+        setColorScheme
+      },
+      children: /* @__PURE__ */ jsx(BreakpointProvider, { unsupportedMatchMediaBreakpoint, children: /* @__PURE__ */ jsxs(Div, { className: classNames, ...rest, children: [
+        withBodyStyle && /* @__PURE__ */ jsx(BodyStyleProvider, {}),
+        withCssVariables && /* @__PURE__ */ jsx(TokenProvider, {}),
+        children
+      ] }) })
+    }
+  );
+}
+
+export { StyledSystemProvider };

package/dist/chunk-STEDL5VQ.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+import { useIsSSR } from 'react-aria';
+
+// src/utils/useMediaQuery.ts
+var supportsMatchMedia = typeof window !== "undefined" && typeof window.matchMedia === "function";
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(() => supportsMatchMedia ? window.matchMedia(query).matches : false);
+  useEffect(() => {
+    if (!supportsMatchMedia) {
+      return;
+    }
+    const mediaQueryList = window.matchMedia(query);
+    const onChange = (event) => {
+      setMatches(event.matches);
+    };
+    mediaQueryList.addEventListener("change", onChange);
+    return () => {
+      mediaQueryList.removeEventListener("change", onChange);
+    };
+  }, [query]);
+  const isSSR = useIsSSR();
+  return isSSR ? false : matches;
+}
+
+export { supportsMatchMedia, useMediaQuery };