dune-react 0.0.9 → 0.0.11

package/dist/components/puck-block/text-sections/rich-text-1/rich-text.js

@@ -7,18 +7,18 @@ const MAX_WIDTH_MAP = {
   full: "max-w-none"
 };
 const RichText = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   content = "",
-  maxWidth = "md"
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: `${MAX_WIDTH_MAP[maxWidth]} prose prose-neutral dark:prose-invert mx-auto`,
-    dangerouslySetInnerHTML: { __html: content }
-  }
-) });
+  styles
+}) => {
+  const maxWidth = (styles == null ? void 0 : styles.maxWidth) ?? "md";
+  return /* @__PURE__ */ jsx(CompoundContainer, { padding: styles == null ? void 0 : styles.padding, sectionStyle: styles == null ? void 0 : styles.sectionStyle, backgroundColor: styles == null ? void 0 : styles.backgroundColor, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${MAX_WIDTH_MAP[maxWidth]} prose prose-neutral dark:prose-invert mx-auto`,
+      dangerouslySetInnerHTML: { __html: content }
+    }
+  ) });
+};
 export {
   RichText
 };

package/dist/components/puck-block/text-sections/tab-section-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, image16x9Placeholder, backgroundColor, sectionStyle, padding, image } from "../../../puck-base/core/fields.js";
+import { image16x9Placeholder, image } from "../../../puck-base/core/fields.js";
 import { TabSection } from "./tab-section.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -19,9 +20,7 @@ const conf = {
         image: image16x9Placeholder
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "How it works",
@@ -43,7 +42,7 @@ const conf = {
         image: image16x9Placeholder
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: TabSection
 };

package/dist/components/puck-block/text-sections/tab-section-1/tab-section.d.ts

@@ -1,8 +1,5 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface TabSectionProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     tabs?: Array<{
@@ -13,5 +10,10 @@ export interface TabSectionProps {
             alt: string;
         };
     }>;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const TabSection: ({ padding, sectionStyle, backgroundColor, heading, description, tabs, }: TabSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabSection: ({ heading, description, tabs, styles, }: TabSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/text-sections/tab-section-1/tab-section.js

@@ -5,16 +5,14 @@ import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const TabSection = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
-  tabs = []
+  tabs = [],
+  styles
 }) => {
   var _a, _b, _c, _d;
   const [active, setActive] = useState(0);
-  return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
+  return /* @__PURE__ */ jsxs(CompoundContainer, { padding: styles == null ? void 0 : styles.padding, sectionStyle: styles == null ? void 0 : styles.sectionStyle, backgroundColor: styles == null ? void 0 : styles.backgroundColor, children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-12 max-w-2xl", children: [
       heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
       description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description })
@@ -23,12 +21,16 @@ const TabSection = ({
       /* @__PURE__ */ jsx("div", { className: "border-border mb-8 flex gap-1 border-b", children: tabs.map((tab, i) => /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: () => setActive(i),
+          onClick: (e) => {
+            e.stopPropagation();
+            setActive(i);
+          },
+          style: { pointerEvents: "auto" },
           className: cn(
-            "-mb-px border-b-2 px-4 py-2 text-sm font-medium transition-colors",
+            "-mb-px border-b-2 px-4 py-2 text-sm font-medium transition-colors cursor-pointer",
             active === i ? "border-primary text-foreground" : "text-muted-foreground hover:text-foreground border-transparent"
           ),
-          children: tab.label
+          children: /* @__PURE__ */ jsx("span", { style: { pointerEvents: "none" }, children: tab.label })
         },
         i
       )) }),

package/dist/components/puck-block/text-sections/timeline-1/index.js

@@ -1,5 +1,5 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { Timeline } from "./timeline.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -19,9 +19,7 @@ const conf = {
         date: "2026"
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Our Journey",
@@ -43,7 +41,7 @@ const conf = {
         date: "2023"
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Timeline
 };

package/dist/components/puck-block/text-sections/timeline-1/timeline.d.ts

@@ -1,8 +1,5 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface TimelineProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     items?: Array<{
@@ -10,5 +7,10 @@ export interface TimelineProps {
         description: string;
         date?: string;
     }>;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Timeline: ({ padding, sectionStyle, backgroundColor, heading, description, items, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Timeline: ({ heading, description, items, styles, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/text-sections/timeline-1/timeline.js

@@ -1,13 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 const Timeline = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
-  items = []
-}) => /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
+  items = [],
+  styles
+}) => /* @__PURE__ */ jsxs(CompoundContainer, { padding: styles == null ? void 0 : styles.padding, sectionStyle: styles == null ? void 0 : styles.sectionStyle, backgroundColor: styles == null ? void 0 : styles.backgroundColor, children: [
   /* @__PURE__ */ jsxs("div", { className: "mb-12 max-w-2xl", children: [
     heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
     description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description })

package/dist/components/puck-block/text-sections/two-column-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, images, contentFieldsWithFeatures, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { images, contentFieldsWithFeatures, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
 import { TwoColumn } from "./two-column.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFieldsWithFeatures,
@@ -28,7 +29,6 @@ const conf = {
       }
     },
     border: {
-      // TODO: would be good to have boolean values
       type: "radio",
       options: [
         { label: "yes", value: "true" },
@@ -48,9 +48,7 @@ const conf = {
         }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "This is the start of something new",
@@ -81,7 +79,7 @@ const conf = {
       }
     ],
     layout: "text-start",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: TwoColumn
 };

package/dist/components/puck-block/text-sections/two-column-1/two-column.d.ts

@@ -5,12 +5,14 @@ type ImageWithAspectRatio = CompoundImageProps & {
     aspectRatio?: "16x9" | "1x1";
 };
 export interface TwoColumnProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     layout?: "text-start" | "text-end";
     images?: ImageWithAspectRatio[];
     border?: "true" | "false";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const TwoColumn: ({ padding, sectionStyle, backgroundColor, layout, border, badge, heading, description, features, buttons, images, }: TwoColumnProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TwoColumn: ({ layout, border, badge, heading, description, features, buttons, images, styles, }: TwoColumnProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/puck-block/text-sections/two-column-1/two-column.js

@@ -6,9 +6,6 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const TwoColumn = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   layout,
   border = "false",
   badge,
@@ -16,16 +13,17 @@ const TwoColumn = ({
   description,
   features,
   buttons,
-  images
+  images,
+  styles
 }) => {
   const hasSingleImage = Array.isArray(images) && images.length === 1;
   const hasMultipleImages = Array.isArray(images) && images.length > 1;
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
-      padding,
-      sectionStyle,
-      backgroundColor,
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       children: /* @__PURE__ */ jsxs(
         "div",
         {

package/dist/components/shadcn/navigation-menu.js

@@ -1,10 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/css-utils.js";
 import { ChevronDownIcon } from "lucide-react";
-import { useEditorContext } from "../puck-base/editor-context.js";
 function NavigationMenu({
   align = "start",
   className,
@@ -12,34 +10,6 @@ function NavigationMenu({
   onValueChange,
   ...props
 }) {
-  const { isEditor } = useEditorContext();
-  const [value, setValue] = useState(props.defaultValue ?? null);
-  const handleValueChange = useCallback(
-    (newValue, details) => {
-      if (newValue === null && details.reason === "focus-out") return;
-      setValue(newValue);
-      onValueChange == null ? void 0 : onValueChange(newValue, details);
-    },
-    [onValueChange]
-  );
-  if (!isEditor) {
-    return /* @__PURE__ */ jsxs(
-      NavigationMenu$1.Root,
-      {
-        "data-slot": "navigation-menu",
-        className: cn(
-          "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-          className
-        ),
-        onValueChange,
-        ...props,
-        children: [
-          children,
-          /* @__PURE__ */ jsx(NavigationMenuPositioner, { align })
-        ]
-      }
-    );
-  }
   return /* @__PURE__ */ jsxs(
     NavigationMenu$1.Root,
     {
@@ -48,8 +18,7 @@ function NavigationMenu({
         "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
         className
       ),
-      value,
-      onValueChange: handleValueChange,
+      onValueChange,
       ...props,
       children: [
         children,
@@ -104,7 +73,13 @@ function NavigationMenuTrigger({
       children: [
         children,
         " ",
-        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180", "aria-hidden": "true" })
+        /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180",
+            "aria-hidden": "true"
+          }
+        )
       ]
     }
   );

package/dist/index.js

@@ -4,7 +4,7 @@ import { default as default4 } from "./components/shadcn/badge-promo.js";
 import { default as default5 } from "./components/puck-base/use-upload.js";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/shadcn/accordion.js";
 import { conf } from "./components/puck-block/faq-sections/accordion-1/index.js";
-import { ActionField } from "./components/puck-base/action-field.js";
+import { ActionField } from "./components/puck-base/fields/action-field.js";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "./components/shadcn/alert.js";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./components/shadcn/alert-dialog.js";
 import { AnimatedThemeToggler } from "./components/shadcn/animated-theme-toggler.js";
@@ -138,7 +138,8 @@ import { TweetCard, truncate } from "./components/shadcn/tweet-card.js";
 import { TweetCardClient } from "./components/shadcn/tweet-card-client.js";
 import { conf as conf55 } from "./components/puck-block/text-sections/two-column-1/index.js";
 import { conf as conf56 } from "./components/puck-block/hero-sections/video-hero-1/index.js";
-import { action, actionDefaults, backgroundColor, backgroundImage, badge, button, buttons, card, cards, contentFields, contentFieldsWithFeatures, description, features, field, fieldDefaults, form, formDefaults, getPlaceholderImageUrl, heading, icon, image, image16x9Placeholder, image1x1Placeholder, image9x16Placeholder, images, padding, paddingDefaults, paddingLevel, sectionOverlay, sectionStyle } from "./components/puck-base/core/fields.js";
+import { action, actionDefaults, badge, button, buttons, card, cards, contentFields, contentFieldsWithFeatures, description, features, field, fieldDefaults, form, formDefaults, getPlaceholderImageUrl, heading, icon, image, image16x9Placeholder, image1x1Placeholder, image9x16Placeholder, images } from "./components/puck-base/core/fields.js";
+import { backgroundColor, backgroundImage, padding, paddingDefaults, paddingLevel, sectionOverlay, sectionStyle } from "./components/puck-base/core/styles.js";
 import { base64ToFile, base64ToUrl, blobToBase64, blobToUrl, convertBase64ToBlob, structureFile } from "./utils/utils-canvas.js";
 import { cn, liquidGlass } from "./utils/css-utils.js";
 import { downloadImage, downloadImageClient, fetchHasOnlineFile, getBase64Client, isValidFileSize, isValidFileType } from "./utils/utils-image.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dune-react",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -8,7 +8,7 @@
     "gen:meta": "node --import ./scripts/register-mocks.mjs --import tsx/esm scripts/generate-component-meta.ts",
     "build": "pnpm gen:meta && vite build && tsc --project tsconfig.build.json",
     "watch": "vite build --watch & tsc --project tsconfig.build.json --watch --preserveWatchOutput &",
-    "build:sync": "pnpm build && cd /Volumes/code/magent && pnpm sync:dune",
+    "build:sync": "pnpm build && cd ../magent && pnpm sync:dune && cd ../canvas-editor && pnpm sync:dune",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 8080",