qstd 0.3.40 → 0.3.42

package/dist/block/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/block/checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAO9B,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,2CAuF5D"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/block/checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAO9B,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,2CAgH5D"}

package/dist/react/index.cjs

@@ -2946,10 +2946,13 @@ function Backdrop(props) {
   );
 }
 function useMatchMedia(queries) {
+  const isClient = typeof window !== "undefined";
   const [value, setValue] = React13__namespace.default.useState(() => {
+    if (!isClient) return queries.map(() => false);
     return queries.map((q) => window.matchMedia(q).matches);
   });
   React13__namespace.default.useLayoutEffect(() => {
+    if (!isClient) return;
     const mediaQueryLists = queries.map((q) => window.matchMedia(q));
     const handler = () => {
       setValue(mediaQueryLists.map((mql) => mql.matches));
@@ -2959,7 +2962,7 @@ function useMatchMedia(queries) {
     return () => mediaQueryLists.forEach(
       (mql) => mql.removeEventListener("change", handler)
     );
-  }, [queries]);
+  }, [queries, isClient]);
   return value;
 }
 var MotionDiv5 = motionTags.div;
@@ -3746,7 +3749,13 @@ var Base6 = base;
 var Svg = motionTags.svg;
 var CheckboxBtn = motionTags.button;
 function Checkbox(props) {
-  const { children, onClick, onAnimationStart, onAnimationComplete, ...rest } = props;
+  const {
+    children,
+    onClick: _onClick,
+    onAnimationStart: _onAnimationStart,
+    onAnimationComplete: _onAnimationComplete,
+    ...rest
+  } = props;
   const [checked, setChecked] = React13__namespace.default.useState(false);
   const [indeterminate, setIndeterminate] = React13__namespace.default.useState(false);
   React13__namespace.default.useEffect(() => {
@@ -3756,6 +3765,10 @@ function Checkbox(props) {
     setIndeterminate(!!rest.indeterminate);
   }, [rest.indeterminate]);
   const isIndeterminate = typeof rest.indeterminate === "boolean";
+  const checkboxSelector = rest._checkbox;
+  const hasCheckboxBg = checkboxSelector && hasAnyProp(checkboxSelector, ["bg", "background", "backgroundColor"]);
+  const checkedSelector = rest._checked;
+  const hasCheckedBg = checkedSelector && hasAnyProp(checkedSelector, ["bg", "background", "backgroundColor"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Base6,
     {
@@ -3780,8 +3793,12 @@ function Checkbox(props) {
             cursor: "pointer",
             boxSizing: "border-box",
             outline: "none !important",
-            bg: { base: "neutral.200", _dark: "neutral.700" },
-            _checked: { bg: "blue.500", transition: ".14s background ease-out" },
+            ...!hasCheckboxBg && {
+              bg: { base: "neutral.200", _dark: "neutral.700" }
+            },
+            ...!hasCheckedBg && {
+              _checked: { bg: "blue.500", transition: ".14s background ease-out" }
+            },
             _active: { scale: 0.9 },
             color: "neutral.100",
             transition: ".14s background ease-out .1s",
@@ -4127,18 +4144,23 @@ function useThrottle(value, interval = 500) {
 }
 function useMatchMedia2(queries, defaultValues = []) {
   const initialValues = defaultValues.length ? defaultValues : Array(queries.length).fill(false);
-  const mediaQueryLists = queries.map((q) => window.matchMedia(q));
-  const getValue = () => {
-    const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
-    return matchedQueries;
-  };
-  const [value, setValue] = React13__namespace.default.useState(getValue);
+  const isClient = typeof window !== "undefined";
+  const [value, setValue] = React13__namespace.default.useState(() => {
+    if (!isClient) return initialValues;
+    return queries.map((q) => window.matchMedia(q).matches);
+  });
   React13__namespace.default.useLayoutEffect(() => {
-    const handler = () => setValue(getValue);
-    mediaQueryLists.forEach((mql) => mql.addListener(handler));
-    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
-  }, []);
-  if (typeof window === "undefined") return initialValues;
+    if (!isClient) return;
+    const mediaQueryLists = queries.map((q) => window.matchMedia(q));
+    const handler = () => {
+      setValue(mediaQueryLists.map((mql) => mql.matches));
+    };
+    handler();
+    mediaQueryLists.forEach((mql) => mql.addEventListener("change", handler));
+    return () => mediaQueryLists.forEach(
+      (mql) => mql.removeEventListener("change", handler)
+    );
+  }, [queries, isClient]);
   return value;
 }
 

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AACA;;;;;GAKG;AAKH,OAAO,gCAAgC,CAAC;AAKxC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAGzC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMlD,MAAM,MAAM,UAAU,GAAG,MAAM,EAAE,CAAC;AAClC,MAAM,MAAM,YAAY,GAAG,OAAO,EAAE,CAAC;AAErC;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,GAAE,MAAY,UAe7D;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAY,UAkChE;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,UAAU,EACnB,aAAa,GAAE,YAAiB,GAC/B,YAAY,CAkCd;AAED,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AACA;;;;;GAKG;AAKH,OAAO,gCAAgC,CAAC;AAKxC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAGzC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMlD,MAAM,MAAM,UAAU,GAAG,MAAM,EAAE,CAAC;AAClC,MAAM,MAAM,YAAY,GAAG,OAAO,EAAE,CAAC;AAErC;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,GAAE,MAAY,UAe7D;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAY,UAkChE;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,UAAU,EACnB,aAAa,GAAE,YAAiB,GAC/B,YAAY,CAoCd;AAED,cAAc,aAAa,CAAC"}

package/dist/react/index.js

@@ -2923,10 +2923,13 @@ function Backdrop(props) {
   );
 }
 function useMatchMedia(queries) {
+  const isClient = typeof window !== "undefined";
   const [value, setValue] = React13__default.useState(() => {
+    if (!isClient) return queries.map(() => false);
     return queries.map((q) => window.matchMedia(q).matches);
   });
   React13__default.useLayoutEffect(() => {
+    if (!isClient) return;
     const mediaQueryLists = queries.map((q) => window.matchMedia(q));
     const handler = () => {
       setValue(mediaQueryLists.map((mql) => mql.matches));
@@ -2936,7 +2939,7 @@ function useMatchMedia(queries) {
     return () => mediaQueryLists.forEach(
       (mql) => mql.removeEventListener("change", handler)
     );
-  }, [queries]);
+  }, [queries, isClient]);
   return value;
 }
 var MotionDiv5 = motionTags.div;
@@ -3723,7 +3726,13 @@ var Base6 = base;
 var Svg = motionTags.svg;
 var CheckboxBtn = motionTags.button;
 function Checkbox(props) {
-  const { children, onClick, onAnimationStart, onAnimationComplete, ...rest } = props;
+  const {
+    children,
+    onClick: _onClick,
+    onAnimationStart: _onAnimationStart,
+    onAnimationComplete: _onAnimationComplete,
+    ...rest
+  } = props;
   const [checked, setChecked] = React13__default.useState(false);
   const [indeterminate, setIndeterminate] = React13__default.useState(false);
   React13__default.useEffect(() => {
@@ -3733,6 +3742,10 @@ function Checkbox(props) {
     setIndeterminate(!!rest.indeterminate);
   }, [rest.indeterminate]);
   const isIndeterminate = typeof rest.indeterminate === "boolean";
+  const checkboxSelector = rest._checkbox;
+  const hasCheckboxBg = checkboxSelector && hasAnyProp(checkboxSelector, ["bg", "background", "backgroundColor"]);
+  const checkedSelector = rest._checked;
+  const hasCheckedBg = checkedSelector && hasAnyProp(checkedSelector, ["bg", "background", "backgroundColor"]);
   return /* @__PURE__ */ jsxs(
     Base6,
     {
@@ -3757,8 +3770,12 @@ function Checkbox(props) {
             cursor: "pointer",
             boxSizing: "border-box",
             outline: "none !important",
-            bg: { base: "neutral.200", _dark: "neutral.700" },
-            _checked: { bg: "blue.500", transition: ".14s background ease-out" },
+            ...!hasCheckboxBg && {
+              bg: { base: "neutral.200", _dark: "neutral.700" }
+            },
+            ...!hasCheckedBg && {
+              _checked: { bg: "blue.500", transition: ".14s background ease-out" }
+            },
             _active: { scale: 0.9 },
             color: "neutral.100",
             transition: ".14s background ease-out .1s",
@@ -4104,18 +4121,23 @@ function useThrottle(value, interval = 500) {
 }
 function useMatchMedia2(queries, defaultValues = []) {
   const initialValues = defaultValues.length ? defaultValues : Array(queries.length).fill(false);
-  const mediaQueryLists = queries.map((q) => window.matchMedia(q));
-  const getValue = () => {
-    const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
-    return matchedQueries;
-  };
-  const [value, setValue] = React13__default.useState(getValue);
+  const isClient = typeof window !== "undefined";
+  const [value, setValue] = React13__default.useState(() => {
+    if (!isClient) return initialValues;
+    return queries.map((q) => window.matchMedia(q).matches);
+  });
   React13__default.useLayoutEffect(() => {
-    const handler = () => setValue(getValue);
-    mediaQueryLists.forEach((mql) => mql.addListener(handler));
-    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
-  }, []);
-  if (typeof window === "undefined") return initialValues;
+    if (!isClient) return;
+    const mediaQueryLists = queries.map((q) => window.matchMedia(q));
+    const handler = () => {
+      setValue(mediaQueryLists.map((mql) => mql.matches));
+    };
+    handler();
+    mediaQueryLists.forEach((mql) => mql.addEventListener("change", handler));
+    return () => mediaQueryLists.forEach(
+      (mql) => mql.removeEventListener("change", handler)
+    );
+  }, [queries, isClient]);
   return value;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qstd",
-  "version": "0.3.40",
+  "version": "0.3.42",
   "description": "Standard Block component and utilities library with Panda CSS",
   "author": "malin1",
   "license": "MIT",