@delmaredigital/payload-puck 0.1.0 → 0.1.1

package/dist/render/index.mjs

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatedWrapper } from '../AnimatedWrapper';
 import * as React from 'react';
 import { memo, useCallback, createElement } from 'react';
-import { IconX } from '@tabler/icons-react';
+import { X } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -458,7 +458,7 @@ function transformValueToCSS(transform) {
   return Object.keys(style).length > 0 ? style : void 0;
 }
 var BREAKPOINTS = [
-  { key: "base", label: "Base", minWidth: null },
+  { key: "xs", label: "XS", minWidth: null },
   { key: "sm", label: "SM", minWidth: 640 },
   { key: "md", label: "MD", minWidth: 768 },
   { key: "lg", label: "LG", minWidth: 1024 },
@@ -466,7 +466,7 @@ var BREAKPOINTS = [
 ];
 function isResponsiveValue(value) {
   if (!value || typeof value !== "object") return false;
-  return "base" in value;
+  return "xs" in value;
 }
 function camelToKebab(str) {
   return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
@@ -492,7 +492,7 @@ function responsiveValueToCSS(value, converter, uniqueId) {
     if (bpValue === void 0) return;
     const cssProps = converter(bpValue);
     if (!cssProps) return;
-    if (bp.key === "base") {
+    if (bp.key === "xs") {
       baseStyles = cssProps;
     } else {
       const styleString = cssPropertiesToString(cssProps);
@@ -508,24 +508,41 @@ function responsiveValueToCSS(value, converter, uniqueId) {
 function visibilityValueToCSS(visibility, uniqueId) {
   if (!visibility) return "";
   const mediaQueries = [];
-  if (visibility.base === false) {
-    mediaQueries.push(`.${uniqueId} { display: none; }`);
+  const breakpointWidths = {
+    xs: null,
+    // 0px
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280
+  };
+  const getNextBreakpointWidth = (bp) => {
+    const order = ["xs", "sm", "md", "lg", "xl"];
+    const index = order.indexOf(bp);
+    if (index === -1 || index === order.length - 1) return null;
+    return breakpointWidths[order[index + 1]];
+  };
+  if (visibility.xs === false) {
+    const nextWidth = getNextBreakpointWidth("xs");
+    if (nextWidth) {
+      mediaQueries.push(`@media (max-width: ${nextWidth - 1}px) { .${uniqueId} { display: none; } }`);
+    } else {
+      mediaQueries.push(`.${uniqueId} { display: none; }`);
+    }
   }
-  let lastVisibility = visibility.base;
   BREAKPOINTS.slice(1).forEach((bp) => {
-    const bpValue = visibility[bp.key];
-    if (bpValue === void 0) return;
-    if (bpValue !== lastVisibility) {
-      if (bpValue === false) {
+    if (visibility[bp.key] === false) {
+      const minWidth = breakpointWidths[bp.key];
+      const maxWidth = getNextBreakpointWidth(bp.key);
+      if (minWidth && maxWidth) {
         mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { display: none; } }`
+          `@media (min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px) { .${uniqueId} { display: none; } }`
         );
-      } else {
+      } else if (minWidth) {
         mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { display: block; } }`
+          `@media (min-width: ${minWidth}px) { .${uniqueId} { display: none; } }`
         );
       }
-      lastVisibility = bpValue;
     }
   });
   return mediaQueries.join("\n");
@@ -1563,7 +1580,7 @@ function SizeFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
     ] }),