@delmaredigital/payload-puck 0.2.0 → 0.3.0

package/dist/render/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/render/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAG7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAGzD,2EAA2E;AAC3E,iEAAiE"}

package/dist/theme/context.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Theme Context
+ *
+ * React context for distributing theme configuration to Puck components.
+ * The useTheme() hook returns defaults when no provider is present,
+ * ensuring backwards compatibility.
+ */
+import { type ReactNode } from 'react';
+import type { ThemeConfig, ResolvedTheme } from './types';
+export interface ThemeProviderProps {
+    children: ReactNode;
+    /** Theme configuration to apply */
+    theme?: ThemeConfig;
+}
+/**
+ * Provides theme configuration to descendant Puck components
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider theme={{
+ *   buttonVariants: {
+ *     default: { classes: 'bg-primary text-white hover:bg-primary/90' }
+ *   }
+ * }}>
+ *   <PageRenderer data={data} />
+ * </ThemeProvider>
+ * ```
+ */
+export declare function ThemeProvider({ children, theme }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the current theme
+ *
+ * Returns DEFAULT_THEME if no ThemeProvider is present,
+ * ensuring components work standalone for backwards compatibility.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const theme = useTheme()
+ *   const buttonClasses = getVariantClasses(theme.buttonVariants, 'primary')
+ *   return <button className={buttonClasses}>Click me</button>
+ * }
+ * ```
+ */
+export declare function useTheme(): ResolvedTheme;
+/**
+ * Gets the default theme for server components
+ *
+ * Use this when you need theme values in a server component
+ * where hooks cannot be used.
+ */
+export declare function getDefaultTheme(): ResolvedTheme;
+/**
+ * Hook to check if a ThemeProvider is present
+ *
+ * Useful for conditional logic based on whether theming is configured.
+ */
+export declare function useHasThemeProvider(): boolean;
+//# sourceMappingURL=context.d.ts.map

package/dist/theme/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/theme/context.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAqB,aAAa,EAAE,MAAM,SAAS,CAAA;AAM5E,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,mCAAmC;IACnC,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,kBAAkB,2CAWpE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,IAAI,aAAa,CAIxC;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,IAAI,aAAa,CAE/C;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,IAAI,OAAO,CAG7C"}

package/dist/theme/context.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Theme Context
+ *
+ * React context for distributing theme configuration to Puck components.
+ * The useTheme() hook returns defaults when no provider is present,
+ * ensuring backwards compatibility.
+ */
+import { createContext, useContext, useMemo } from 'react';
+import { DEFAULT_THEME } from './defaults';
+import { resolveTheme } from './utils';
+const ThemeContext = createContext(null);
+/**
+ * Provides theme configuration to descendant Puck components
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider theme={{
+ *   buttonVariants: {
+ *     default: { classes: 'bg-primary text-white hover:bg-primary/90' }
+ *   }
+ * }}>
+ *   <PageRenderer data={data} />
+ * </ThemeProvider>
+ * ```
+ */
+export function ThemeProvider({ children, theme }) {
+    const resolvedTheme = useMemo(() => resolveTheme(theme), [theme]);
+    const value = useMemo(() => ({
+        theme: resolvedTheme,
+    }), [resolvedTheme]);
+    return _jsx(ThemeContext.Provider, { value: value, children: children });
+}
+/**
+ * Hook to access the current theme
+ *
+ * Returns DEFAULT_THEME if no ThemeProvider is present,
+ * ensuring components work standalone for backwards compatibility.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const theme = useTheme()
+ *   const buttonClasses = getVariantClasses(theme.buttonVariants, 'primary')
+ *   return <button className={buttonClasses}>Click me</button>
+ * }
+ * ```
+ */
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    // Return defaults if no provider - ensures backwards compatibility
+    return context?.theme ?? DEFAULT_THEME;
+}
+/**
+ * Gets the default theme for server components
+ *
+ * Use this when you need theme values in a server component
+ * where hooks cannot be used.
+ */
+export function getDefaultTheme() {
+    return DEFAULT_THEME;
+}
+/**
+ * Hook to check if a ThemeProvider is present
+ *
+ * Useful for conditional logic based on whether theming is configured.
+ */
+export function useHasThemeProvider() {
+    const context = useContext(ThemeContext);
+    return context !== null;
+}
+//# sourceMappingURL=context.js.map

package/dist/theme/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/theme/context.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;GAMG;AAEH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAA;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAA;AAQlE;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAsB;IACnE,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEjE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,aAAa;KACrB,CAAC,EACF,CAAC,aAAa,CAAC,CAChB,CAAA;IAED,OAAO,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAyB,CAAA;AAChF,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,QAAQ;IACtB,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IACxC,mEAAmE;IACnE,OAAO,OAAO,EAAE,KAAK,IAAI,aAAa,CAAA;AACxC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO,aAAa,CAAA;AACtB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IACxC,OAAO,OAAO,KAAK,IAAI,CAAA;AACzB,CAAC"}

package/dist/theme/defaults.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Default Theme Values
+ *
+ * These defaults ensure backwards compatibility - components render
+ * identically to before theming was introduced when no theme is provided.
+ */
+import type { ButtonVariantStyles, BackgroundStyles, ColorPreset, ResolvedTheme } from './types';
+/**
+ * Default button variant styles
+ * Uses semantic Tailwind classes that map to CSS variables (--primary, --secondary, etc.)
+ * This allows consuming apps to customize colors via their theme CSS variables.
+ */
+export declare const DEFAULT_BUTTON_VARIANTS: ButtonVariantStyles;
+/**
+ * Default CTA button variant styles
+ * Uses semantic Tailwind classes that map to CSS variables.
+ */
+export declare const DEFAULT_CTA_BUTTON_VARIANTS: ButtonVariantStyles;
+/**
+ * Default CTA background styles
+ * Uses semantic Tailwind classes that map to CSS variables.
+ */
+export declare const DEFAULT_CTA_BACKGROUND_STYLES: BackgroundStyles;
+/**
+ * Default color picker presets
+ * Matches DEFAULT_PRESETS from ColorPickerField.tsx
+ */
+export declare const DEFAULT_COLOR_PRESETS: ColorPreset[];
+/**
+ * Default focus ring color class
+ * Uses semantic ring color from CSS variables
+ */
+export declare const DEFAULT_FOCUS_RING = "focus:ring-ring";
+/**
+ * Complete default theme
+ * Used when no ThemeProvider is present or no theme config is provided
+ */
+export declare const DEFAULT_THEME: ResolvedTheme;
+//# sourceMappingURL=defaults.d.ts.map

package/dist/theme/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../src/theme/defaults.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EACV,mBAAmB,EACnB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACd,MAAM,SAAS,CAAA;AAEhB;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,EAAE,mBAOrC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,2BAA2B,EAAE,mBAMzC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,6BAA6B,EAAE,gBAI3C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,WAAW,EAW9C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,oBAAoB,CAAA;AAEnD;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,aAM3B,CAAA"}

package/dist/theme/defaults.js

@@ -0,0 +1,72 @@
+/**
+ * Default Theme Values
+ *
+ * These defaults ensure backwards compatibility - components render
+ * identically to before theming was introduced when no theme is provided.
+ */
+/**
+ * Default button variant styles
+ * Uses semantic Tailwind classes that map to CSS variables (--primary, --secondary, etc.)
+ * This allows consuming apps to customize colors via their theme CSS variables.
+ */
+export const DEFAULT_BUTTON_VARIANTS = {
+    default: { classes: 'bg-primary text-primary-foreground hover:bg-primary/90' },
+    secondary: { classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80' },
+    outline: { classes: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground' },
+    ghost: { classes: 'bg-transparent hover:bg-accent hover:text-accent-foreground' },
+    destructive: { classes: 'bg-destructive text-destructive-foreground hover:bg-destructive/90' },
+    link: { classes: 'text-primary underline-offset-4 hover:underline bg-transparent' },
+};
+/**
+ * Default CTA button variant styles
+ * Uses semantic Tailwind classes that map to CSS variables.
+ */
+export const DEFAULT_CTA_BUTTON_VARIANTS = {
+    primary: { classes: 'bg-primary text-primary-foreground hover:bg-primary/90' },
+    secondary: { classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80' },
+    outline: { classes: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground' },
+    ghost: { classes: 'bg-transparent hover:bg-accent hover:text-accent-foreground' },
+    link: { classes: 'text-primary underline-offset-4 hover:underline bg-transparent' },
+};
+/**
+ * Default CTA background styles
+ * Uses semantic Tailwind classes that map to CSS variables.
+ */
+export const DEFAULT_CTA_BACKGROUND_STYLES = {
+    default: 'bg-muted',
+    dark: 'bg-foreground text-background',
+    light: 'bg-background',
+};
+/**
+ * Default color picker presets
+ * Matches DEFAULT_PRESETS from ColorPickerField.tsx
+ */
+export const DEFAULT_COLOR_PRESETS = [
+    { hex: '#ffffff', label: 'White' },
+    { hex: '#f9fafb', label: 'Gray 50' },
+    { hex: '#f3f4f6', label: 'Gray 100' },
+    { hex: '#1f2937', label: 'Gray 800' },
+    { hex: '#111827', label: 'Gray 900' },
+    { hex: '#000000', label: 'Black' },
+    { hex: '#3b82f6', label: 'Blue' },
+    { hex: '#10b981', label: 'Green' },
+    { hex: '#f59e0b', label: 'Amber' },
+    { hex: '#ef4444', label: 'Red' },
+];
+/**
+ * Default focus ring color class
+ * Uses semantic ring color from CSS variables
+ */
+export const DEFAULT_FOCUS_RING = 'focus:ring-ring';
+/**
+ * Complete default theme
+ * Used when no ThemeProvider is present or no theme config is provided
+ */
+export const DEFAULT_THEME = {
+    buttonVariants: DEFAULT_BUTTON_VARIANTS,
+    ctaButtonVariants: DEFAULT_CTA_BUTTON_VARIANTS,
+    ctaBackgroundStyles: DEFAULT_CTA_BACKGROUND_STYLES,
+    colorPresets: DEFAULT_COLOR_PRESETS,
+    focusRingColor: DEFAULT_FOCUS_RING,
+};
+//# sourceMappingURL=defaults.js.map

package/dist/theme/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../src/theme/defaults.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AASH;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAwB;IAC1D,OAAO,EAAE,EAAE,OAAO,EAAE,wDAAwD,EAAE;IAC9E,SAAS,EAAE,EAAE,OAAO,EAAE,8DAA8D,EAAE;IACtF,OAAO,EAAE,EAAE,OAAO,EAAE,gFAAgF,EAAE;IACtG,KAAK,EAAE,EAAE,OAAO,EAAE,6DAA6D,EAAE;IACjF,WAAW,EAAE,EAAE,OAAO,EAAE,oEAAoE,EAAE;IAC9F,IAAI,EAAE,EAAE,OAAO,EAAE,gEAAgE,EAAE;CACpF,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAwB;IAC9D,OAAO,EAAE,EAAE,OAAO,EAAE,wDAAwD,EAAE;IAC9E,SAAS,EAAE,EAAE,OAAO,EAAE,8DAA8D,EAAE;IACtF,OAAO,EAAE,EAAE,OAAO,EAAE,gFAAgF,EAAE;IACtG,KAAK,EAAE,EAAE,OAAO,EAAE,6DAA6D,EAAE;IACjF,IAAI,EAAE,EAAE,OAAO,EAAE,gEAAgE,EAAE;CACpF,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAqB;IAC7D,OAAO,EAAE,UAAU;IACnB,IAAI,EAAE,+BAA+B;IACrC,KAAK,EAAE,eAAe;CACvB,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAkB;IAClD,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACpC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE;CACjC,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAAiB,CAAA;AAEnD;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAkB;IAC1C,cAAc,EAAE,uBAAuB;IACvC,iBAAiB,EAAE,2BAA2B;IAC9C,mBAAmB,EAAE,6BAA6B;IAClD,YAAY,EAAE,qBAAqB;IACnC,cAAc,EAAE,kBAAkB;CACnC,CAAA"}

package/dist/theme/example.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Example Theme Configuration
+ *
+ * Copy this file to your project and customize it to match your design system.
+ *
+ * Usage:
+ * 1. Copy this file to your project (e.g., src/lib/puck-theme.ts)
+ * 2. Customize the values to match your CSS variables/design tokens
+ * 3. Import and pass to PageRenderer or PuckEditor:
+ *
+ * ```tsx
+ * import { puckTheme } from '@/lib/puck-theme'
+ *
+ * <PageRenderer data={data} config={config} theme={puckTheme} />
+ * ```
+ */
+import type { ThemeConfig } from './types';
+/**
+ * Example theme using shadcn/ui CSS variables
+ *
+ * This example assumes you have CSS variables like:
+ * --primary, --primary-foreground
+ * --secondary, --secondary-foreground
+ * --accent, --accent-foreground
+ * --muted, --muted-foreground
+ * --destructive, --destructive-foreground
+ * --ring (for focus rings)
+ */
+export declare const exampleTheme: ThemeConfig;
+//# sourceMappingURL=example.d.ts.map

package/dist/theme/example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"example.d.ts","sourceRoot":"","sources":["../../src/theme/example.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WAiE1B,CAAA"}

package/dist/theme/example.js

@@ -0,0 +1,89 @@
+/**
+ * Example Theme Configuration
+ *
+ * Copy this file to your project and customize it to match your design system.
+ *
+ * Usage:
+ * 1. Copy this file to your project (e.g., src/lib/puck-theme.ts)
+ * 2. Customize the values to match your CSS variables/design tokens
+ * 3. Import and pass to PageRenderer or PuckEditor:
+ *
+ * ```tsx
+ * import { puckTheme } from '@/lib/puck-theme'
+ *
+ * <PageRenderer data={data} config={config} theme={puckTheme} />
+ * ```
+ */
+/**
+ * Example theme using shadcn/ui CSS variables
+ *
+ * This example assumes you have CSS variables like:
+ * --primary, --primary-foreground
+ * --secondary, --secondary-foreground
+ * --accent, --accent-foreground
+ * --muted, --muted-foreground
+ * --destructive, --destructive-foreground
+ * --ring (for focus rings)
+ */
+export const exampleTheme = {
+    // Button component variants
+    buttonVariants: {
+        default: {
+            classes: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        },
+        secondary: {
+            classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        },
+        outline: {
+            classes: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        },
+        ghost: {
+            classes: 'hover:bg-accent hover:text-accent-foreground',
+        },
+        destructive: {
+            classes: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        },
+        link: {
+            classes: 'text-primary underline-offset-4 hover:underline',
+        },
+    },
+    // CTA button variants
+    ctaButtonVariants: {
+        primary: {
+            classes: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        },
+        secondary: {
+            classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        },
+        outline: {
+            classes: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        },
+    },
+    // CTA background styles
+    ctaBackgroundStyles: {
+        default: 'bg-muted',
+        dark: 'bg-primary text-primary-foreground',
+        light: 'bg-background',
+    },
+    // Focus ring class
+    focusRingColor: 'focus:ring-ring',
+    // Color picker presets - customize with your brand colors
+    colorPresets: [
+        { hex: '#ffffff', label: 'White' },
+        { hex: '#f8fafc', label: 'Slate 50' },
+        { hex: '#f1f5f9', label: 'Slate 100' },
+        { hex: '#e2e8f0', label: 'Slate 200' },
+        { hex: '#64748b', label: 'Slate 500' },
+        { hex: '#334155', label: 'Slate 700' },
+        { hex: '#1e293b', label: 'Slate 800' },
+        { hex: '#0f172a', label: 'Slate 900' },
+        { hex: '#000000', label: 'Black' },
+        { hex: '#3b82f6', label: 'Blue' },
+        { hex: '#10b981', label: 'Green' },
+        { hex: '#f59e0b', label: 'Amber' },
+        { hex: '#ef4444', label: 'Red' },
+    ],
+    // Set to true to add your presets to defaults instead of replacing
+    extendColorPresets: false,
+};
+//# sourceMappingURL=example.js.map

package/dist/theme/example.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"example.js","sourceRoot":"","sources":["../../src/theme/example.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,YAAY,GAAgB;IACvC,4BAA4B;IAC5B,cAAc,EAAE;QACd,OAAO,EAAE;YACP,OAAO,EAAE,wDAAwD;SAClE;QACD,SAAS,EAAE;YACT,OAAO,EAAE,8DAA8D;SACxE;QACD,OAAO,EAAE;YACP,OAAO,EAAE,gFAAgF;SAC1F;QACD,KAAK,EAAE;YACL,OAAO,EAAE,8CAA8C;SACxD;QACD,WAAW,EAAE;YACX,OAAO,EAAE,oEAAoE;SAC9E;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,iDAAiD;SAC3D;KACF;IAED,sBAAsB;IACtB,iBAAiB,EAAE;QACjB,OAAO,EAAE;YACP,OAAO,EAAE,wDAAwD;SAClE;QACD,SAAS,EAAE;YACT,OAAO,EAAE,8DAA8D;SACxE;QACD,OAAO,EAAE;YACP,OAAO,EAAE,gFAAgF;SAC1F;KACF;IAED,wBAAwB;IACxB,mBAAmB,EAAE;QACnB,OAAO,EAAE,UAAU;QACnB,IAAI,EAAE,oCAAoC;QAC1C,KAAK,EAAE,eAAe;KACvB;IAED,mBAAmB;IACnB,cAAc,EAAE,iBAAiB;IAEjC,0DAA0D;IAC1D,YAAY,EAAE;QACZ,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QAClC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;QACrC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE;QACtC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE;QACtC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE;QACtC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE;QACtC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE;QACtC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE;QACtC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QAClC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE;QACjC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QAClC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QAClC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE;KACjC;IAED,mEAAmE;IACnE,kBAAkB,EAAE,KAAK;CAC1B,CAAA"}

package/dist/theme/index.d.ts

@@ -1,155 +1,32 @@
-import { T as ThemeConfig, R as ResolvedTheme, B as ButtonVariantStyles, a as BackgroundStyles, C as ColorPreset } from '../types-_6MvjyKv.js';
-export { b as ButtonVariantConfig, c as ThemeContextValue } from '../types-_6MvjyKv.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-interface ThemeProviderProps {
-    children: ReactNode;
-    /** Theme configuration to apply */
-    theme?: ThemeConfig;
-}
 /**
- * Provides theme configuration to descendant Puck components
+ * Theme Module
+ *
+ * Provides dynamic theming capabilities for payload-puck components.
  *
  * @example
  * ```tsx
+ * import { ThemeProvider, useTheme, getVariantClasses } from '@delmaredigital/payload-puck/theme'
+ *
+ * // In your app
  * <ThemeProvider theme={{
  *   buttonVariants: {
- *     default: { classes: 'bg-primary text-white hover:bg-primary/90' }
+ *     default: { classes: 'bg-primary text-primary-foreground' }
  *   }
  * }}>
  *   <PageRenderer data={data} />
  * </ThemeProvider>
- * ```
- */
-declare function ThemeProvider({ children, theme }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
-/**
- * Hook to access the current theme
- *
- * Returns DEFAULT_THEME if no ThemeProvider is present,
- * ensuring components work standalone for backwards compatibility.
  *
- * @example
- * ```tsx
- * function MyComponent() {
+ * // In a component
+ * function CustomButton({ variant }) {
  *   const theme = useTheme()
- *   const buttonClasses = getVariantClasses(theme.buttonVariants, 'primary')
- *   return <button className={buttonClasses}>Click me</button>
+ *   const classes = getVariantClasses(theme.buttonVariants, variant)
+ *   return <button className={classes}>...</button>
  * }
  * ```
  */
-declare function useTheme(): ResolvedTheme;
-/**
- * Gets the default theme for server components
- *
- * Use this when you need theme values in a server component
- * where hooks cannot be used.
- */
-declare function getDefaultTheme(): ResolvedTheme;
-/**
- * Hook to check if a ThemeProvider is present
- *
- * Useful for conditional logic based on whether theming is configured.
- */
-declare function useHasThemeProvider(): boolean;
-
-/**
- * Default Theme Values
- *
- * These defaults ensure backwards compatibility - components render
- * identically to before theming was introduced when no theme is provided.
- */
-
-/**
- * Default button variant styles
- * Uses semantic Tailwind classes that map to CSS variables (--primary, --secondary, etc.)
- * This allows consuming apps to customize colors via their theme CSS variables.
- */
-declare const DEFAULT_BUTTON_VARIANTS: ButtonVariantStyles;
-/**
- * Default CTA button variant styles
- * Uses semantic Tailwind classes that map to CSS variables.
- */
-declare const DEFAULT_CTA_BUTTON_VARIANTS: ButtonVariantStyles;
-/**
- * Default CTA background styles
- * Uses semantic Tailwind classes that map to CSS variables.
- */
-declare const DEFAULT_CTA_BACKGROUND_STYLES: BackgroundStyles;
-/**
- * Default color picker presets
- * Matches DEFAULT_PRESETS from ColorPickerField.tsx
- */
-declare const DEFAULT_COLOR_PRESETS: ColorPreset[];
-/**
- * Default focus ring color class
- * Uses semantic ring color from CSS variables
- */
-declare const DEFAULT_FOCUS_RING = "focus:ring-ring";
-/**
- * Complete default theme
- * Used when no ThemeProvider is present or no theme config is provided
- */
-declare const DEFAULT_THEME: ResolvedTheme;
-
-/**
- * Theme Resolution Utilities
- *
- * Functions for merging user-provided theme config with defaults
- * and safely accessing theme values.
- */
-
-/**
- * Merges user-provided theme config with defaults to create a fully resolved theme
- */
-declare function resolveTheme(config?: ThemeConfig): ResolvedTheme;
-/**
- * Safely gets variant classes from a variant styles object
- *
- * @param variants - The button variant styles object
- * @param variant - The variant key to look up
- * @param fallback - Fallback variant key if the requested variant doesn't exist
- * @returns The CSS classes string for the variant
- */
-declare function getVariantClasses(variants: ButtonVariantStyles, variant: string, fallback?: string): string;
-/**
- * Safely gets background style classes
- *
- * @param styles - The background styles object
- * @param style - The style key to look up
- * @param fallback - Fallback style key if the requested style doesn't exist
- * @returns The CSS classes string for the background
- */
-declare function getBackgroundClasses(styles: BackgroundStyles, style: string, fallback?: string): string;
-
-/**
- * Example Theme Configuration
- *
- * Copy this file to your project and customize it to match your design system.
- *
- * Usage:
- * 1. Copy this file to your project (e.g., src/lib/puck-theme.ts)
- * 2. Customize the values to match your CSS variables/design tokens
- * 3. Import and pass to PageRenderer or PuckEditor:
- *
- * ```tsx
- * import { puckTheme } from '@/lib/puck-theme'
- *
- * <PageRenderer data={data} config={config} theme={puckTheme} />
- * ```
- */
-
-/**
- * Example theme using shadcn/ui CSS variables
- *
- * This example assumes you have CSS variables like:
- * --primary, --primary-foreground
- * --secondary, --secondary-foreground
- * --accent, --accent-foreground
- * --muted, --muted-foreground
- * --destructive, --destructive-foreground
- * --ring (for focus rings)
- */
-declare const exampleTheme: ThemeConfig;
-
-export { BackgroundStyles, ButtonVariantStyles, ColorPreset, DEFAULT_BUTTON_VARIANTS, DEFAULT_COLOR_PRESETS, DEFAULT_CTA_BACKGROUND_STYLES, DEFAULT_CTA_BUTTON_VARIANTS, DEFAULT_FOCUS_RING, DEFAULT_THEME, ResolvedTheme, ThemeConfig, ThemeProvider, type ThemeProviderProps, exampleTheme, getBackgroundClasses, getDefaultTheme, getVariantClasses, resolveTheme, useHasThemeProvider, useTheme };
+export type { ButtonVariantConfig, ButtonVariantStyles, ColorPreset, BackgroundStyles, ThemeConfig, ResolvedTheme, ThemeContextValue, } from './types';
+export { ThemeProvider, useTheme, getDefaultTheme, useHasThemeProvider, type ThemeProviderProps, } from './context';
+export { DEFAULT_BUTTON_VARIANTS, DEFAULT_CTA_BUTTON_VARIANTS, DEFAULT_CTA_BACKGROUND_STYLES, DEFAULT_COLOR_PRESETS, DEFAULT_FOCUS_RING, DEFAULT_THEME, } from './defaults';
+export { resolveTheme, getVariantClasses, getBackgroundClasses } from './utils';
+export { exampleTheme } from './example';
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAGH,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,GAClB,MAAM,SAAS,CAAA;AAGhB,OAAO,EACL,aAAa,EACb,QAAQ,EACR,eAAe,EACf,mBAAmB,EACnB,KAAK,kBAAkB,GACxB,MAAM,WAAW,CAAA;AAGlB,OAAO,EACL,uBAAuB,EACvB,2BAA2B,EAC3B,6BAA6B,EAC7B,qBAAqB,EACrB,kBAAkB,EAClB,aAAa,GACd,MAAM,YAAY,CAAA;AAGnB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAG/E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}