@delmaredigital/payload-puck 0.1.3 → 0.2.0

package/dist/fields/index.js

@@ -810,25 +810,23 @@ function responsiveValueToCSS(value, converter, uniqueId) {
       mediaQueryCSS: ""
     };
   }
-  const mediaQueries = [];
-  let baseStyles = {};
+  const cssRules = [];
   BREAKPOINTS.forEach((bp) => {
     const bpValue = value[bp.key];
     if (bpValue === void 0) return;
     const cssProps = converter(bpValue);
     if (!cssProps) return;
+    const styleString = cssPropertiesToString(cssProps);
+    if (!styleString) return;
     if (bp.key === "xs") {
-      baseStyles = cssProps;
+      cssRules.push(`.${uniqueId} { ${styleString} }`);
     } else {
-      const styleString = cssPropertiesToString(cssProps);
-      if (styleString) {
-        mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { ${styleString} } }`
-        );
-      }
+      cssRules.push(
+        `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { ${styleString} } }`
+      );
     }
   });
-  return { baseStyles, mediaQueryCSS: mediaQueries.join("\n") };
+  return { baseStyles: {}, mediaQueryCSS: cssRules.join("\n") };
 }
 var DEFAULT_VISIBILITY = {
   xs: true,
@@ -4196,12 +4194,12 @@ var Checkbox = React12__namespace.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 var DEFAULT_VALUE5 = {
-  mode: "contained",
+  mode: "full",
   alignment: "center",
   maxWidth: {
-    value: 1200,
+    value: 0,
     unit: "px",
-    enabled: true
+    enabled: false
   },
   advancedMode: false
 };
@@ -4428,11 +4426,13 @@ function DimensionsFieldInner({
   const handleAdvancedToggle = React12.useCallback(() => {
     const newAdvancedMode = !advancedMode;
     setAdvancedMode(newAdvancedMode);
-    onChange({
-      ...currentValue,
-      advancedMode: newAdvancedMode
-    });
-  }, [advancedMode, currentValue, onChange]);
+    if (value !== null) {
+      onChange({
+        ...currentValue,
+        advancedMode: newAdvancedMode
+      });
+    }
+  }, [advancedMode, currentValue, onChange, value]);
   const modeConfig = [
     { mode: "full", icon: lucideReact.MoveHorizontal, label: "Full", title: "Full width (100%)" },
     { mode: "contained", icon: lucideReact.Square, label: "Contain", title: "Contained (centered with max-width)" },
@@ -6434,7 +6434,7 @@ function ResponsiveFieldInner({
 }) {
   const [activeBreakpoint, setActiveBreakpoint] = React12.useState("xs");
   const getCurrentValue = React12.useCallback(() => {
-    if (!value) return defaultValue ?? null;
+    if (!value) return null;
     if (activeBreakpoint === "xs") {
       return value.xs ?? defaultValue ?? null;
     }
@@ -6456,21 +6456,35 @@ function ResponsiveFieldInner({
   const hasOverride = React12.useCallback(
     (breakpoint) => {
       if (!value) return false;
-      if (breakpoint === "xs") return value.xs !== void 0;
+      if (breakpoint === "xs") return false;
       return value[breakpoint] !== void 0;
     },
     [value]
   );
+  const getInheritanceSource = React12.useCallback(() => {
+    if (!value || activeBreakpoint === "xs") return null;
+    if (value[activeBreakpoint] !== void 0) return null;
+    const breakpointOrder = ["xl", "lg", "md", "sm", "xs"];
+    const activeIndex = breakpointOrder.indexOf(activeBreakpoint);
+    for (let i = activeIndex + 1; i < breakpointOrder.length; i++) {
+      const bp = breakpointOrder[i];
+      if (value[bp] !== void 0) {
+        return bp;
+      }
+    }
+    return null;
+  }, [value, activeBreakpoint]);
   const handleInnerChange = React12.useCallback(
     (newValue) => {
       if (activeBreakpoint === "xs") {
-        if (newValue === null && defaultValue !== void 0) {
-          onChange({ ...value, xs: defaultValue });
-        } else if (newValue !== null) {
+        if (newValue === null) {
+          onChange(null);
+        } else {
           onChange({ ...value, xs: newValue });
         }
       } else {
         if (newValue === null) {
+          if (!value) return;
           const newResponsive = { ...value };
           delete newResponsive[activeBreakpoint];
           onChange(newResponsive);
@@ -6499,6 +6513,7 @@ function ResponsiveFieldInner({
   const currentValue = getCurrentValue();
   const isOverrideBreakpoint = activeBreakpoint !== "xs";
   const currentHasOverride = hasOverride(activeBreakpoint);
+  const inheritanceSource = getInheritanceSource();
   const overrideCount = value ? ["sm", "md", "lg", "xl"].filter((bp) => value[bp] !== void 0).length : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "puck-field space-y-3", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -6540,7 +6555,11 @@ function ResponsiveFieldInner({
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: activeBreakpoint === "xs" ? "Extra small screens (0-639px)" : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         BREAKPOINTS.find((bp) => bp.key === activeBreakpoint)?.minWidth,
         "px and up",
-        !currentHasOverride && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/60", children: " (inheriting from xs)" })
+        !currentHasOverride && inheritanceSource && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground/60", children: [
+          " (inheriting from ",
+          inheritanceSource.toUpperCase(),
+          ")"
+        ] })
       ] }) }),
       isOverrideBreakpoint && currentHasOverride && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
         Button,

package/dist/fields/index.mjs

@@ -779,25 +779,23 @@ function responsiveValueToCSS(value, converter, uniqueId) {
       mediaQueryCSS: ""
     };
   }
-  const mediaQueries = [];
-  let baseStyles = {};
+  const cssRules = [];
   BREAKPOINTS.forEach((bp) => {
     const bpValue = value[bp.key];
     if (bpValue === void 0) return;
     const cssProps = converter(bpValue);
     if (!cssProps) return;
+    const styleString = cssPropertiesToString(cssProps);
+    if (!styleString) return;
     if (bp.key === "xs") {
-      baseStyles = cssProps;
+      cssRules.push(`.${uniqueId} { ${styleString} }`);
     } else {
-      const styleString = cssPropertiesToString(cssProps);
-      if (styleString) {
-        mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { ${styleString} } }`
-        );
-      }
+      cssRules.push(
+        `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { ${styleString} } }`
+      );
     }
   });
-  return { baseStyles, mediaQueryCSS: mediaQueries.join("\n") };
+  return { baseStyles: {}, mediaQueryCSS: cssRules.join("\n") };
 }
 var DEFAULT_VISIBILITY = {
   xs: true,
@@ -4165,12 +4163,12 @@ var Checkbox = React12.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 var DEFAULT_VALUE5 = {
-  mode: "contained",
+  mode: "full",
   alignment: "center",
   maxWidth: {
-    value: 1200,
+    value: 0,
     unit: "px",
-    enabled: true
+    enabled: false
   },
   advancedMode: false
 };
@@ -4397,11 +4395,13 @@ function DimensionsFieldInner({
   const handleAdvancedToggle = useCallback(() => {
     const newAdvancedMode = !advancedMode;
     setAdvancedMode(newAdvancedMode);
-    onChange({
-      ...currentValue,
-      advancedMode: newAdvancedMode
-    });
-  }, [advancedMode, currentValue, onChange]);
+    if (value !== null) {
+      onChange({
+        ...currentValue,
+        advancedMode: newAdvancedMode
+      });
+    }
+  }, [advancedMode, currentValue, onChange, value]);
   const modeConfig = [
     { mode: "full", icon: MoveHorizontal, label: "Full", title: "Full width (100%)" },
     { mode: "contained", icon: Square, label: "Contain", title: "Contained (centered with max-width)" },
@@ -6403,7 +6403,7 @@ function ResponsiveFieldInner({
 }) {
   const [activeBreakpoint, setActiveBreakpoint] = useState("xs");
   const getCurrentValue = useCallback(() => {
-    if (!value) return defaultValue ?? null;
+    if (!value) return null;
     if (activeBreakpoint === "xs") {
       return value.xs ?? defaultValue ?? null;
     }
@@ -6425,21 +6425,35 @@ function ResponsiveFieldInner({
   const hasOverride = useCallback(
     (breakpoint) => {
       if (!value) return false;
-      if (breakpoint === "xs") return value.xs !== void 0;
+      if (breakpoint === "xs") return false;
       return value[breakpoint] !== void 0;
     },
     [value]
   );
+  const getInheritanceSource = useCallback(() => {
+    if (!value || activeBreakpoint === "xs") return null;
+    if (value[activeBreakpoint] !== void 0) return null;
+    const breakpointOrder = ["xl", "lg", "md", "sm", "xs"];
+    const activeIndex = breakpointOrder.indexOf(activeBreakpoint);
+    for (let i = activeIndex + 1; i < breakpointOrder.length; i++) {
+      const bp = breakpointOrder[i];
+      if (value[bp] !== void 0) {
+        return bp;
+      }
+    }
+    return null;
+  }, [value, activeBreakpoint]);
   const handleInnerChange = useCallback(
     (newValue) => {
       if (activeBreakpoint === "xs") {
-        if (newValue === null && defaultValue !== void 0) {
-          onChange({ ...value, xs: defaultValue });
-        } else if (newValue !== null) {
+        if (newValue === null) {
+          onChange(null);
+        } else {
           onChange({ ...value, xs: newValue });
         }
       } else {
         if (newValue === null) {
+          if (!value) return;
           const newResponsive = { ...value };
           delete newResponsive[activeBreakpoint];
           onChange(newResponsive);
@@ -6468,6 +6482,7 @@ function ResponsiveFieldInner({
   const currentValue = getCurrentValue();
   const isOverrideBreakpoint = activeBreakpoint !== "xs";
   const currentHasOverride = hasOverride(activeBreakpoint);
+  const inheritanceSource = getInheritanceSource();
   const overrideCount = value ? ["sm", "md", "lg", "xl"].filter((bp) => value[bp] !== void 0).length : 0;
   return /* @__PURE__ */ jsxs("div", { className: "puck-field space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -6509,7 +6524,11 @@ function ResponsiveFieldInner({
       /* @__PURE__ */ jsx("span", { children: activeBreakpoint === "xs" ? "Extra small screens (0-639px)" : /* @__PURE__ */ jsxs(Fragment, { children: [
         BREAKPOINTS.find((bp) => bp.key === activeBreakpoint)?.minWidth,
         "px and up",
-        !currentHasOverride && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: " (inheriting from xs)" })
+        !currentHasOverride && inheritanceSource && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60", children: [
+          " (inheriting from ",
+          inheritanceSource.toUpperCase(),
+          ")"
+        ] })
       ] }) }),
       isOverrideBreakpoint && currentHasOverride && !readOnly && /* @__PURE__ */ jsx(
         Button,