@marigold/system 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @marigold/system
 
+## 0.5.0
+
+### Minor Changes
+
+- [#1723](https://github.com/marigold-ui/marigold/pull/1723) [`5936de75`](https://github.com/marigold-ui/marigold/commit/5936de75e5a0134584438117c53c5edfe15c6c5d) Thanks [@sebald](https://github.com/sebald)! - feat(system): add hook that allows to use values based on screen size
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -317,6 +317,13 @@ interface Theme {
     transitions?: ZeroScale<CSS.Property.Transition>;
 }
 
+/**
+ * Hook that can be used to return values based on the current screen size,
+ * using breakpoints from the theme (`theme.breakpoints`). Note that this
+ * hook is client.side only.
+ */
+declare const useResponsiveValue: <T>(values: T[], defaultIndex?: number) => T;
+
 /**
  * @internal
  */
@@ -361,4 +368,4 @@ declare const appendVariantState: (variant: string, state: keyof State) => strin
  */
 declare const conditional: (variant: string, { disabled, ...states }: State) => string[];
 
-export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, Global, NormalizedElement, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, State, StyleObject, StyleProps, Theme, ThemeProvider, ThemeProviderProps, ZeroScale, __defaultTheme, appendVariantState, conditional, ensureArray, ensureArrayVariant, ensureVariantDefault, getNormalizedStyles, normalize, useTheme };
+export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, Global, NormalizedElement, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, State, StyleObject, StyleProps, Theme, ThemeProvider, ThemeProviderProps, ZeroScale, __defaultTheme, appendVariantState, conditional, ensureArray, ensureArrayVariant, ensureVariantDefault, getNormalizedStyles, normalize, useResponsiveValue, useTheme };

package/dist/index.js

@@ -70,6 +70,7 @@ __export(src_exports, {
   ensureVariantDefault: () => ensureVariantDefault,
   getNormalizedStyles: () => getNormalizedStyles,
   normalize: () => normalize,
+  useResponsiveValue: () => useResponsiveValue,
   useTheme: () => useTheme
 });
 
@@ -383,6 +384,31 @@ var SVG = (_a) => {
     css
   }), children);
 };
+
+// src/useResponsiveValue.ts
+var import_react8 = require("react");
+var emptyBreakpoints = ["40em", "52em", "64em"];
+var useResponsiveValue = (values, defaultIndex = 0) => {
+  const { theme } = useTheme();
+  const breakpoints = theme.breakpoints || emptyBreakpoints;
+  if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
+    throw new RangeError(`Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`);
+  }
+  const [index, setIndex] = (0, import_react8.useState)(defaultIndex);
+  (0, import_react8.useEffect)(() => {
+    const getIndex = () => breakpoints.filter((breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches).length;
+    const handleResize = () => {
+      const newIndex = getIndex();
+      if (index !== newIndex) {
+        setIndex(newIndex);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [breakpoints, index]);
+  return values[index >= values.length ? values.length - 1 : index];
+};
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -398,5 +424,6 @@ module.exports = __toCommonJS(src_exports);
   ensureVariantDefault,
   getNormalizedStyles,
   normalize,
+  useResponsiveValue,
   useTheme
 });

package/dist/index.mjs

@@ -344,6 +344,31 @@ var SVG = (_a) => {
     css
   }), children);
 };
+
+// src/useResponsiveValue.ts
+import { useEffect, useState } from "react";
+var emptyBreakpoints = ["40em", "52em", "64em"];
+var useResponsiveValue = (values, defaultIndex = 0) => {
+  const { theme } = useTheme();
+  const breakpoints = theme.breakpoints || emptyBreakpoints;
+  if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
+    throw new RangeError(`Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`);
+  }
+  const [index, setIndex] = useState(defaultIndex);
+  useEffect(() => {
+    const getIndex = () => breakpoints.filter((breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches).length;
+    const handleResize = () => {
+      const newIndex = getIndex();
+      if (index !== newIndex) {
+        setIndex(newIndex);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [breakpoints, index]);
+  return values[index >= values.length ? values.length - 1 : index];
+};
 export {
   Box,
   Global,
@@ -357,5 +382,6 @@ export {
   ensureVariantDefault,
   getNormalizedStyles,
   normalize,
+  useResponsiveValue,
   useTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -22,7 +22,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "github:marigold-ui/marigold",
+    "url": "https://github.com/marigold-ui/marigold",
     "directory": "packages/system"
   },
   "dependencies": {