@delmaredigital/payload-puck 0.1.0

package/examples/styles/puck-theme.css

@@ -0,0 +1,171 @@
+/**
+ * Puck Theme CSS Variables
+ *
+ * This file provides shadcn/ui-compatible CSS variables for Puck components.
+ * Import this file in your project's global CSS to style Puck editor components.
+ *
+ * WHEN TO USE THIS FILE:
+ * - If you DON'T use shadcn/ui, copy this file and import it
+ * - If you DO use shadcn/ui, you can skip this - variables already exist
+ *
+ * Usage:
+ *   1. Copy to your project: src/styles/puck-theme.css
+ *   2. Import in your root layout or globals.css
+ *   3. Customize colors to match your brand
+ *
+ * ============================================================================
+ * TAILWIND v4 USERS
+ * ============================================================================
+ *
+ * If you're using Tailwind CSS v4, add the following to your main CSS file
+ * after @import "tailwindcss" to ensure Puck components are included in the
+ * CSS build and use your theme:
+ *
+ *   @source "../node_modules/@delmaredigital/payload-puck";
+ *
+ *   @theme inline {
+ *     --color-background: var(--background);
+ *     --color-foreground: var(--foreground);
+ *     --color-primary: var(--primary);
+ *     --color-primary-foreground: var(--primary-foreground);
+ *     --color-secondary: var(--secondary);
+ *     --color-secondary-foreground: var(--secondary-foreground);
+ *     --color-muted: var(--muted);
+ *     --color-muted-foreground: var(--muted-foreground);
+ *     --color-accent: var(--accent);
+ *     --color-accent-foreground: var(--accent-foreground);
+ *     --color-destructive: var(--destructive);
+ *     --color-destructive-foreground: var(--destructive-foreground);
+ *     --color-border: var(--border);
+ *     --color-input: var(--input);
+ *     --color-ring: var(--ring);
+ *     --color-popover: var(--popover);
+ *     --color-popover-foreground: var(--popover-foreground);
+ *     --color-card: var(--card);
+ *     --color-card-foreground: var(--card-foreground);
+ *     --radius-sm: calc(var(--radius) - 4px);
+ *     --radius-md: calc(var(--radius) - 2px);
+ *     --radius-lg: var(--radius);
+ *     --radius-xl: calc(var(--radius) + 4px);
+ *   }
+ *
+ * ============================================================================
+ */
+
+/**
+ * Light Mode (Default)
+ *
+ * These variables define the default light theme using neutral slate/zinc colors.
+ * Override these in your own CSS to match your brand colors.
+ */
+:root {
+  /* Background & Foreground
+   * --background: The main page/app background color
+   * --foreground: The default text color for content */
+  --background: #ffffff;
+  --foreground: #0a0a0a;
+
+  /* Primary
+   * --primary: Used for primary actions, buttons, and emphasis
+   * --primary-foreground: Text color on primary backgrounds */
+  --primary: #18181b;
+  --primary-foreground: #fafafa;
+
+  /* Secondary
+   * --secondary: Used for secondary actions and less prominent UI elements
+   * --secondary-foreground: Text color on secondary backgrounds */
+  --secondary: #f4f4f5;
+  --secondary-foreground: #18181b;
+
+  /* Muted
+   * --muted: Used for muted/subtle backgrounds (e.g., disabled states, badges)
+   * --muted-foreground: Text color for muted/secondary text */
+  --muted: #f4f4f5;
+  --muted-foreground: #71717a;
+
+  /* Accent
+   * --accent: Used for hover states, highlights, and accented UI elements
+   * --accent-foreground: Text color on accent backgrounds */
+  --accent: #f4f4f5;
+  --accent-foreground: #18181b;
+
+  /* Destructive
+   * --destructive: Used for error states, delete actions, and warnings
+   * --destructive-foreground: Text color on destructive backgrounds */
+  --destructive: #ef4444;
+  --destructive-foreground: #fafafa;
+
+  /* Border & Input
+   * --border: Default border color for cards, dividers, and containers
+   * --input: Border color specifically for form inputs */
+  --border: #e4e4e7;
+  --input: #e4e4e7;
+
+  /* Ring
+   * --ring: Focus ring color for accessibility (keyboard navigation) */
+  --ring: #18181b;
+
+  /* Popover
+   * --popover: Background color for popovers, dropdowns, and floating menus
+   * --popover-foreground: Text color inside popovers */
+  --popover: #ffffff;
+  --popover-foreground: #0a0a0a;
+
+  /* Card
+   * --card: Background color for card components and elevated surfaces
+   * --card-foreground: Text color inside cards */
+  --card: #ffffff;
+  --card-foreground: #0a0a0a;
+
+  /* Border Radius
+   * --radius: Base border radius used throughout the UI
+   * Components use calc() to derive sm, md, lg, xl variants */
+  --radius: 0.5rem;
+}
+
+/**
+ * Dark Mode
+ *
+ * Applied when the `.dark` class is present on an ancestor element.
+ * Uses darker zinc/slate tones for comfortable viewing in low-light environments.
+ */
+.dark {
+  /* Background & Foreground */
+  --background: #0a0a0a;
+  --foreground: #fafafa;
+
+  /* Primary */
+  --primary: #fafafa;
+  --primary-foreground: #18181b;
+
+  /* Secondary */
+  --secondary: #27272a;
+  --secondary-foreground: #fafafa;
+
+  /* Muted */
+  --muted: #27272a;
+  --muted-foreground: #a1a1aa;
+
+  /* Accent */
+  --accent: #27272a;
+  --accent-foreground: #fafafa;
+
+  /* Destructive */
+  --destructive: #7f1d1d;
+  --destructive-foreground: #fafafa;
+
+  /* Border & Input */
+  --border: #27272a;
+  --input: #27272a;
+
+  /* Ring */
+  --ring: #d4d4d8;
+
+  /* Popover */
+  --popover: #0a0a0a;
+  --popover-foreground: #fafafa;
+
+  /* Card */
+  --card: #0a0a0a;
+  --card-foreground: #fafafa;
+}

package/package.json

@@ -0,0 +1,157 @@
+{
+  "name": "@delmaredigital/payload-puck",
+  "version": "0.1.0",
+  "description": "Puck visual page builder plugin for Payload CMS",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./plugin": {
+      "types": "./dist/plugin/index.d.ts",
+      "import": "./dist/plugin/index.mjs",
+      "require": "./dist/plugin/index.js"
+    },
+    "./config": {
+      "types": "./dist/config/index.d.ts",
+      "import": "./dist/config/index.mjs",
+      "require": "./dist/config/index.js"
+    },
+    "./config/editor": {
+      "types": "./dist/config/config.editor.d.ts",
+      "import": "./dist/config/config.editor.mjs",
+      "require": "./dist/config/config.editor.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.mjs",
+      "require": "./dist/components/index.js"
+    },
+    "./fields": {
+      "types": "./dist/fields/index.d.ts",
+      "import": "./dist/fields/index.mjs",
+      "require": "./dist/fields/index.js"
+    },
+    "./render": {
+      "types": "./dist/render/index.d.ts",
+      "import": "./dist/render/index.mjs",
+      "require": "./dist/render/index.js"
+    },
+    "./editor": {
+      "types": "./dist/editor/index.d.ts",
+      "import": "./dist/editor/index.mjs",
+      "require": "./dist/editor/index.js"
+    },
+    "./api": {
+      "types": "./dist/api/index.d.ts",
+      "import": "./dist/api/index.mjs",
+      "require": "./dist/api/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.mjs",
+      "require": "./dist/utils/index.js"
+    },
+    "./admin": {
+      "types": "./dist/admin/index.d.ts",
+      "import": "./dist/admin/index.mjs",
+      "require": "./dist/admin/index.js"
+    },
+    "./admin/client": {
+      "types": "./dist/admin/client.d.ts",
+      "import": "./dist/admin/client.mjs",
+      "require": "./dist/admin/client.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.mjs",
+      "require": "./dist/theme/index.js"
+    },
+    "./layouts": {
+      "types": "./dist/layouts/index.d.ts",
+      "import": "./dist/layouts/index.mjs",
+      "require": "./dist/layouts/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "examples",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@measured/puck": ">=0.20.0",
+    "@payloadcms/ui": ">=3.0.0",
+    "next": ">=15.4.0",
+    "payload": ">=3.0.0",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@payloadcms/ui": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@measured/puck-plugin-heading-analyzer": "^0.20.2",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@tabler/icons-react": "^3.36.1",
+    "@tiptap/core": "^3.14.0",
+    "@tiptap/extension-color": "^3.14.0",
+    "@tiptap/extension-highlight": "^3.14.0",
+    "@tiptap/extension-link": "^3.14.0",
+    "@tiptap/extension-subscript": "^3.15.3",
+    "@tiptap/extension-superscript": "^3.15.3",
+    "@tiptap/extension-text-align": "^3.14.0",
+    "@tiptap/extension-text-style": "^3.14.0",
+    "@tiptap/extension-underline": "^3.14.0",
+    "@tiptap/react": "^3.14.0",
+    "@tiptap/starter-kit": "^3.14.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@measured/puck": "^0.20.2",
+    "@payloadcms/ui": "^3.69.0",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "next": "^16.1.1",
+    "payload": "^3.69.0",
+    "react": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "payload",
+    "payloadcms",
+    "payload-plugin",
+    "puck",
+    "page-builder",
+    "visual-editor",
+    "cms"
+  ],
+  "engines": {
+    "node": "^18.20.2 || >=20.9.0"
+  },
+  "author": "Delmare Digital",
+  "license": "PolyForm-Noncommercial-1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/delmaredigital/payload-puck.git"
+  },
+  "bugs": {
+    "url": "https://github.com/delmaredigital/payload-puck/issues"
+  },
+  "homepage": "https://delmaredigital.com/developers",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}