@saas-ui/storybook-addon 1.0.0 → 1.0.1-next.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @chakra-ui/storybook-addon
 
+## 1.0.1-next.0
+
+### Patch Changes
+
+- Bump version
+
 ## 4.0.17
 
 ### Patch Changes

package/dist/{chunk-E3MMX4DM.js → chunk-MSSXLFPL.js}

@@ -1178,9 +1178,9 @@ var require_react_fast_compare = __commonJS({
         }
         if (a.constructor === RegExp)
           return a.source === b.source && a.flags === b.flags;
-        if (a.valueOf !== Object.prototype.valueOf)
+        if (a.valueOf !== Object.prototype.valueOf && typeof a.valueOf === "function" && typeof b.valueOf === "function")
           return a.valueOf() === b.valueOf();
-        if (a.toString !== Object.prototype.toString)
+        if (a.toString !== Object.prototype.toString && typeof a.toString === "function" && typeof b.toString === "function")
           return a.toString() === b.toString();
         keys = Object.keys(a);
         length2 = keys.length;
@@ -3190,6 +3190,9 @@ var trimSpace = (str) => str.trim();
 function parseGradient(value, theme) {
   if (value == null || globalSet.has(value))
     return value;
+  const prevent = isCSSFunction(value) || globalSet.has(value);
+  if (!prevent)
+    return `url('${value}')`;
   const regex = /(^[a-z-A-Z]+)\((.*)\)/g;
   const results = regex.exec(value);
   const type = results == null ? void 0 : results[1];
@@ -3309,6 +3312,7 @@ var t = {
   borderStyles: toConfig("borderStyles"),
   colors: toConfig("colors"),
   borders: toConfig("borders"),
+  gradients: toConfig("gradients", transformFunctions.gradient),
   radii: toConfig("radii", transformFunctions.px),
   space: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
   spaceT: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
@@ -3335,7 +3339,7 @@ var t = {
 var background = {
   background: t.colors("background"),
   backgroundColor: t.colors("backgroundColor"),
-  backgroundImage: t.propT("backgroundImage", transformFunctions.bgImage),
+  backgroundImage: t.gradients("backgroundImage"),
   backgroundSize: true,
   backgroundPosition: true,
   backgroundRepeat: true,
@@ -3348,7 +3352,7 @@ var background = {
   bgPos: t.prop("backgroundPosition"),
   bgRepeat: t.prop("backgroundRepeat"),
   bgAttachment: t.prop("backgroundAttachment"),
-  bgGradient: t.propT("backgroundImage", transformFunctions.gradient),
+  bgGradient: t.gradients("backgroundImage"),
   bgClip: { transform: transformFunctions.bgClip }
 };
 Object.assign(background, {
@@ -3604,7 +3608,8 @@ var layout = {
     scale: "breakpoints",
     transform: (value, theme) => {
       var _a2, _b, _c;
-      const mq = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b.minWQuery) != null ? _c : `@media screen and (min-width: ${value})`;
+      const breakpoint = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b.minW) != null ? _c : value;
+      const mq = `@media screen and (min-width: ${breakpoint})`;
       return { [mq]: { display: "none" } };
     }
   },
@@ -3612,7 +3617,8 @@ var layout = {
     scale: "breakpoints",
     transform: (value, theme) => {
       var _a2, _b, _c;
-      const mq = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b.maxWQuery) != null ? _c : `@media screen and (max-width: ${value})`;
+      const breakpoint = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b._minW) != null ? _c : value;
+      const mq = `@media screen and (max-width: ${breakpoint})`;
       return { [mq]: { display: "none" } };
     }
   },

package/dist/feature/color-mode/ThemeTool.cjs

@@ -1227,9 +1227,9 @@ var require_react_fast_compare = __commonJS({
         }
         if (a.constructor === RegExp)
           return a.source === b.source && a.flags === b.flags;
-        if (a.valueOf !== Object.prototype.valueOf)
+        if (a.valueOf !== Object.prototype.valueOf && typeof a.valueOf === "function" && typeof b.valueOf === "function")
           return a.valueOf() === b.valueOf();
-        if (a.toString !== Object.prototype.toString)
+        if (a.toString !== Object.prototype.toString && typeof a.toString === "function" && typeof b.toString === "function")
           return a.toString() === b.toString();
         keys = Object.keys(a);
         length2 = keys.length;
@@ -3255,6 +3255,9 @@ var trimSpace = (str) => str.trim();
 function parseGradient(value, theme) {
   if (value == null || globalSet.has(value))
     return value;
+  const prevent = isCSSFunction(value) || globalSet.has(value);
+  if (!prevent)
+    return `url('${value}')`;
   const regex = /(^[a-z-A-Z]+)\((.*)\)/g;
   const results = regex.exec(value);
   const type = results == null ? void 0 : results[1];
@@ -3374,6 +3377,7 @@ var t = {
   borderStyles: toConfig("borderStyles"),
   colors: toConfig("colors"),
   borders: toConfig("borders"),
+  gradients: toConfig("gradients", transformFunctions.gradient),
   radii: toConfig("radii", transformFunctions.px),
   space: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
   spaceT: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
@@ -3400,7 +3404,7 @@ var t = {
 var background = {
   background: t.colors("background"),
   backgroundColor: t.colors("backgroundColor"),
-  backgroundImage: t.propT("backgroundImage", transformFunctions.bgImage),
+  backgroundImage: t.gradients("backgroundImage"),
   backgroundSize: true,
   backgroundPosition: true,
   backgroundRepeat: true,
@@ -3413,7 +3417,7 @@ var background = {
   bgPos: t.prop("backgroundPosition"),
   bgRepeat: t.prop("backgroundRepeat"),
   bgAttachment: t.prop("backgroundAttachment"),
-  bgGradient: t.propT("backgroundImage", transformFunctions.gradient),
+  bgGradient: t.gradients("backgroundImage"),
   bgClip: { transform: transformFunctions.bgClip }
 };
 Object.assign(background, {
@@ -3669,7 +3673,8 @@ var layout = {
     scale: "breakpoints",
     transform: (value, theme) => {
       var _a2, _b, _c;
-      const mq = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b.minWQuery) != null ? _c : `@media screen and (min-width: ${value})`;
+      const breakpoint = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b.minW) != null ? _c : value;
+      const mq = `@media screen and (min-width: ${breakpoint})`;
       return { [mq]: { display: "none" } };
     }
   },
@@ -3677,7 +3682,8 @@ var layout = {
     scale: "breakpoints",
     transform: (value, theme) => {
       var _a2, _b, _c;
-      const mq = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b.maxWQuery) != null ? _c : `@media screen and (max-width: ${value})`;
+      const breakpoint = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b._minW) != null ? _c : value;
+      const mq = `@media screen and (max-width: ${breakpoint})`;
       return { [mq]: { display: "none" } };
     }
   },

package/dist/feature/color-mode/ThemeTool.js

@@ -1,6 +1,6 @@
 import {
   ThemeTool
-} from "../../chunk-E3MMX4DM.js";
+} from "../../chunk-MSSXLFPL.js";
 import "../../chunk-HSBRF2QZ.js";
 import "../../chunk-UK7U2PBM.js";
 export {

package/dist/preset/register.cjs

@@ -1222,9 +1222,9 @@ var require_react_fast_compare = __commonJS({
         }
         if (a.constructor === RegExp)
           return a.source === b.source && a.flags === b.flags;
-        if (a.valueOf !== Object.prototype.valueOf)
+        if (a.valueOf !== Object.prototype.valueOf && typeof a.valueOf === "function" && typeof b.valueOf === "function")
           return a.valueOf() === b.valueOf();
-        if (a.toString !== Object.prototype.toString)
+        if (a.toString !== Object.prototype.toString && typeof a.toString === "function" && typeof b.toString === "function")
           return a.toString() === b.toString();
         keys = Object.keys(a);
         length2 = keys.length;
@@ -3303,6 +3303,9 @@ var trimSpace = (str) => str.trim();
 function parseGradient(value, theme) {
   if (value == null || globalSet.has(value))
     return value;
+  const prevent = isCSSFunction(value) || globalSet.has(value);
+  if (!prevent)
+    return `url('${value}')`;
   const regex = /(^[a-z-A-Z]+)\((.*)\)/g;
   const results = regex.exec(value);
   const type = results == null ? void 0 : results[1];
@@ -3422,6 +3425,7 @@ var t = {
   borderStyles: toConfig("borderStyles"),
   colors: toConfig("colors"),
   borders: toConfig("borders"),
+  gradients: toConfig("gradients", transformFunctions.gradient),
   radii: toConfig("radii", transformFunctions.px),
   space: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
   spaceT: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
@@ -3448,7 +3452,7 @@ var t = {
 var background = {
   background: t.colors("background"),
   backgroundColor: t.colors("backgroundColor"),
-  backgroundImage: t.propT("backgroundImage", transformFunctions.bgImage),
+  backgroundImage: t.gradients("backgroundImage"),
   backgroundSize: true,
   backgroundPosition: true,
   backgroundRepeat: true,
@@ -3461,7 +3465,7 @@ var background = {
   bgPos: t.prop("backgroundPosition"),
   bgRepeat: t.prop("backgroundRepeat"),
   bgAttachment: t.prop("backgroundAttachment"),
-  bgGradient: t.propT("backgroundImage", transformFunctions.gradient),
+  bgGradient: t.gradients("backgroundImage"),
   bgClip: { transform: transformFunctions.bgClip }
 };
 Object.assign(background, {
@@ -3717,7 +3721,8 @@ var layout = {
     scale: "breakpoints",
     transform: (value, theme) => {
       var _a2, _b, _c;
-      const mq = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b.minWQuery) != null ? _c : `@media screen and (min-width: ${value})`;
+      const breakpoint = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b.minW) != null ? _c : value;
+      const mq = `@media screen and (min-width: ${breakpoint})`;
       return { [mq]: { display: "none" } };
     }
   },
@@ -3725,7 +3730,8 @@ var layout = {
     scale: "breakpoints",
     transform: (value, theme) => {
       var _a2, _b, _c;
-      const mq = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b.maxWQuery) != null ? _c : `@media screen and (max-width: ${value})`;
+      const breakpoint = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b._minW) != null ? _c : value;
+      const mq = `@media screen and (max-width: ${breakpoint})`;
       return { [mq]: { display: "none" } };
     }
   },

package/dist/preset/register.js

@@ -1,6 +1,6 @@
 import {
   ThemeTool
-} from "../chunk-E3MMX4DM.js";
+} from "../chunk-MSSXLFPL.js";
 import {
   DirectionTool
 } from "../chunk-SGM3YTWS.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/storybook-addon",
-  "version": "1.0.0",
+  "version": "1.0.1-next.0",
   "description": "The official Storybook Addon for Saas UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -73,19 +73,23 @@
   },
   "homepage": "https://github.com/saas-ui/saas-ui#readme",
   "devDependencies": {
-    "@chakra-ui/react": "^2.5.1",
+    "@chakra-ui/react": "^2.5.5",
     "@chakra-ui/system": ">=2.3.8",
     "@emotion/react": ">=11.1.5",
     "@emotion/styled": ">=11.1.5",
-    "@saas-ui/react": "2.0.0-next.5",
-    "@saas-ui/theme-glass": "0.3.2-next.1",
-    "@storybook/addons": "^7.0.0-rc.6",
-    "@storybook/api": "^7.0.0-rc.6",
-    "@storybook/components": "^7.0.0-rc.6",
+    "@saas-ui/react": "2.0.0-next.13",
+    "@saas-ui/theme": "2.0.0-next.7",
+    "@saas-ui/theme-glass": "0.3.2-next.2",
+    "@storybook/addons": "^7.0.2",
+    "@storybook/api": "^7.0.2",
+    "@storybook/components": "^7.0.2",
     "framer-motion": ">=4.1.17",
-    "react": "^18.0.0",
+    "react": "^18.2.0",
     "react-dom": ">=18.0.0",
-    "tsup": "^6.6.3"
+    "tsup": "^6.7.0"
+  },
+  "dependencies": {
+    "@chakra-ui/icons": "^2.0.18"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=2.0.0",