@delmaredigital/payload-puck 0.2.0 → 0.3.1

package/dist/theme/index.d.mts

@@ -1,155 +0,0 @@
-import { T as ThemeConfig, R as ResolvedTheme, B as ButtonVariantStyles, a as BackgroundStyles, C as ColorPreset } from '../types-_6MvjyKv.mjs';
-export { b as ButtonVariantConfig, c as ThemeContextValue } from '../types-_6MvjyKv.mjs';
-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
- *
- * @example
- * ```tsx
- * <ThemeProvider theme={{
- *   buttonVariants: {
- *     default: { classes: 'bg-primary text-white hover:bg-primary/90' }
- *   }
- * }}>
- *   <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() {
- *   const theme = useTheme()
- *   const buttonClasses = getVariantClasses(theme.buttonVariants, 'primary')
- *   return <button className={buttonClasses}>Click me</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 };

package/dist/theme/index.mjs

@@ -1,186 +0,0 @@
-"use client";
-import { createContext, useMemo, useContext } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-// src/theme/context.tsx
-
-// src/theme/defaults.ts
-var 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" }
-};
-var 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" }
-};
-var DEFAULT_CTA_BACKGROUND_STYLES = {
-  default: "bg-muted",
-  dark: "bg-foreground text-background",
-  light: "bg-background"
-};
-var 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" }
-];
-var DEFAULT_FOCUS_RING = "focus:ring-ring";
-var DEFAULT_THEME = {
-  buttonVariants: DEFAULT_BUTTON_VARIANTS,
-  ctaButtonVariants: DEFAULT_CTA_BUTTON_VARIANTS,
-  ctaBackgroundStyles: DEFAULT_CTA_BACKGROUND_STYLES,
-  colorPresets: DEFAULT_COLOR_PRESETS,
-  focusRingColor: DEFAULT_FOCUS_RING
-};
-
-// src/theme/utils.ts
-function resolveTheme(config) {
-  if (!config) return DEFAULT_THEME;
-  return {
-    buttonVariants: mergeVariants(DEFAULT_BUTTON_VARIANTS, config.buttonVariants),
-    ctaButtonVariants: mergeVariants(DEFAULT_CTA_BUTTON_VARIANTS, config.ctaButtonVariants),
-    ctaBackgroundStyles: mergeBackgroundStyles(
-      DEFAULT_CTA_BACKGROUND_STYLES,
-      config.ctaBackgroundStyles
-    ),
-    colorPresets: resolveColorPresets(config),
-    focusRingColor: config.focusRingColor ?? DEFAULT_FOCUS_RING
-  };
-}
-function mergeVariants(defaults, overrides) {
-  if (!overrides) return defaults;
-  const result = { ...defaults };
-  for (const key of Object.keys(overrides)) {
-    const override = overrides[key];
-    if (override) {
-      result[key] = override;
-    }
-  }
-  return result;
-}
-function mergeBackgroundStyles(defaults, overrides) {
-  if (!overrides) return defaults;
-  return { ...defaults, ...overrides };
-}
-function resolveColorPresets(config) {
-  if (!config.colorPresets) {
-    return DEFAULT_COLOR_PRESETS;
-  }
-  if (config.extendColorPresets) {
-    return [...DEFAULT_COLOR_PRESETS, ...config.colorPresets];
-  }
-  return config.colorPresets;
-}
-function getVariantClasses(variants, variant, fallback = "default") {
-  const config = variants[variant];
-  if (config?.classes) {
-    return config.classes;
-  }
-  const fallbackConfig = variants[fallback];
-  return fallbackConfig?.classes ?? "";
-}
-function getBackgroundClasses(styles, style, fallback = "default") {
-  return styles[style] ?? styles[fallback] ?? "";
-}
-var ThemeContext = createContext(null);
-function ThemeProvider({ children, theme }) {
-  const resolvedTheme = useMemo(() => resolveTheme(theme), [theme]);
-  const value = useMemo(
-    () => ({
-      theme: resolvedTheme
-    }),
-    [resolvedTheme]
-  );
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
-}
-function useTheme() {
-  const context = useContext(ThemeContext);
-  return context?.theme ?? DEFAULT_THEME;
-}
-function getDefaultTheme() {
-  return DEFAULT_THEME;
-}
-function useHasThemeProvider() {
-  const context = useContext(ThemeContext);
-  return context !== null;
-}
-
-// src/theme/example.ts
-var 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
-};
-
-export { DEFAULT_BUTTON_VARIANTS, DEFAULT_COLOR_PRESETS, DEFAULT_CTA_BACKGROUND_STYLES, DEFAULT_CTA_BUTTON_VARIANTS, DEFAULT_FOCUS_RING, DEFAULT_THEME, ThemeProvider, exampleTheme, getBackgroundClasses, getDefaultTheme, getVariantClasses, resolveTheme, useHasThemeProvider, useTheme };
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map

package/dist/types-D7D3rZ1J.d.mts

@@ -1,116 +0,0 @@
-import { CSSProperties, ReactNode, ComponentType } from 'react';
-
-/**
- * Layout System Types
- *
- * Defines the structure for page layouts that affect how content is rendered.
- */
-
-/**
- * A layout option shown in the Puck editor's layout selector
- */
-interface LayoutOption {
-    /** Unique identifier for the layout */
-    value: string;
-    /** Display name in the editor */
-    label: string;
-    /** Optional description shown in the editor */
-    description?: string;
-}
-/**
- * CSS class configuration for a layout
- */
-interface LayoutClasses {
-    /** Classes applied to the outermost wrapper */
-    wrapper?: string;
-    /** Classes applied to the main content container */
-    container?: string;
-    /** Classes applied to the content area */
-    content?: string;
-}
-/**
- * Style configuration for a layout
- */
-interface LayoutStyles {
-    /** Styles applied to the outermost wrapper */
-    wrapper?: CSSProperties;
-    /** Styles applied to the main content container */
-    container?: CSSProperties;
-    /** Styles applied to the content area */
-    content?: CSSProperties;
-}
-/**
- * Complete layout definition
- */
-interface LayoutDefinition extends LayoutOption {
-    /** CSS classes to apply */
-    classes?: LayoutClasses;
-    /** Inline styles to apply */
-    styles?: LayoutStyles;
-    /** Custom wrapper component (overrides default rendering) */
-    wrapper?: React.ComponentType<{
-        children: ReactNode;
-    }>;
-    /** Max width constraint (e.g., '1200px', '100%') */
-    maxWidth?: string;
-    /** Whether the layout uses full viewport width */
-    fullWidth?: boolean;
-    /** Additional data attributes to add */
-    dataAttributes?: Record<string, string>;
-    /**
-     * Header component to render above the page content.
-     * Shown in both the editor preview and the rendered page.
-     */
-    header?: ComponentType;
-    /**
-     * Footer component to render below the page content.
-     * Shown in both the editor preview and the rendered page.
-     */
-    footer?: ComponentType;
-    /**
-     * Background color/gradient for the editor preview.
-     * Applied to the iframe body in the Puck editor.
-     * @default '#ffffff'
-     */
-    editorBackground?: string;
-    /**
-     * Whether this layout uses dark mode styling in the editor preview.
-     * Controls text color and theme class on the iframe.
-     * @default false
-     */
-    editorDarkMode?: boolean;
-    /**
-     * Height of a sticky/fixed header in pixels.
-     * Used to add padding-top to the content area in the editor preview
-     * so content doesn't render behind the header.
-     * @example 64 // for a 64px tall sticky header
-     */
-    stickyHeaderHeight?: number;
-    /**
-     * Whether to push the footer to the bottom of the viewport.
-     * Uses flexbox to ensure the footer stays at the bottom even when
-     * page content is minimal. Set to `false` to allow footer to flow
-     * naturally after content.
-     * @default true
-     */
-    stickyFooter?: boolean;
-}
-/**
- * Layout configuration passed to the plugin/renderer
- */
-interface LayoutConfig {
-    /** Available layouts */
-    layouts: LayoutDefinition[];
-    /** Default layout value to use */
-    defaultLayout?: string;
-}
-/**
- * Props passed to a custom layout wrapper component
- */
-interface LayoutWrapperProps {
-    children: ReactNode;
-    layout: LayoutDefinition;
-    pageTitle?: string;
-}
-
-export type { LayoutDefinition as L, LayoutConfig as a, LayoutOption as b, LayoutClasses as c, LayoutStyles as d, LayoutWrapperProps as e };

package/dist/types-_6MvjyKv.d.mts

@@ -1,104 +0,0 @@
-/**
- * Theme Type Definitions
- *
- * Defines all theme-related TypeScript interfaces for the payload-puck plugin.
- * These types enable consuming applications to customize button variants,
- * color presets, and other visual styles.
- */
-/**
- * Configuration for a single button variant
- */
-interface ButtonVariantConfig {
-    /** Tailwind classes for the variant */
-    classes: string;
-    /** Optional CSS variable reference for dynamic theming */
-    cssVariable?: string;
-}
-/**
- * Map of button variant names to their configurations
- */
-interface ButtonVariantStyles {
-    default?: ButtonVariantConfig;
-    primary?: ButtonVariantConfig;
-    secondary?: ButtonVariantConfig;
-    outline?: ButtonVariantConfig;
-    ghost?: ButtonVariantConfig;
-    destructive?: ButtonVariantConfig;
-    link?: ButtonVariantConfig;
-    [key: string]: ButtonVariantConfig | undefined;
-}
-/**
- * Color preset for the color picker
- */
-interface ColorPreset {
-    /** Hex color value (e.g., '#3b82f6') */
-    hex: string;
-    /** Display label for the preset */
-    label: string;
-    /** Optional CSS variable reference (e.g., 'var(--color-primary)') */
-    cssVariable?: string;
-}
-/**
- * Background style configurations for CTA components
- */
-interface BackgroundStyles {
-    default?: string;
-    dark?: string;
-    light?: string;
-    [key: string]: string | undefined;
-}
-/**
- * Theme configuration provided by consuming applications
- * All properties are optional and will be merged with defaults
- */
-interface ThemeConfig {
-    /**
-     * Button variant styles
-     * Merged with default button variants
-     */
-    buttonVariants?: Partial<ButtonVariantStyles>;
-    /**
-     * CTA button variant styles
-     * Merged with default CTA button variants
-     */
-    ctaButtonVariants?: Partial<ButtonVariantStyles>;
-    /**
-     * CTA background styles
-     * Merged with default background styles
-     */
-    ctaBackgroundStyles?: Partial<BackgroundStyles>;
-    /**
-     * Color picker preset colors
-     * If provided, replaces defaults unless extendColorPresets is true
-     */
-    colorPresets?: ColorPreset[];
-    /**
-     * Whether to extend default color presets (true) or replace them (false)
-     * @default false
-     */
-    extendColorPresets?: boolean;
-    /**
-     * Focus ring color class (e.g., 'focus:ring-primary')
-     * @default 'focus:ring-blue-500'
-     */
-    focusRingColor?: string;
-}
-/**
- * Fully resolved theme with all defaults applied
- * This is what components receive via useTheme()
- */
-interface ResolvedTheme {
-    buttonVariants: ButtonVariantStyles;
-    ctaButtonVariants: ButtonVariantStyles;
-    ctaBackgroundStyles: BackgroundStyles;
-    colorPresets: ColorPreset[];
-    focusRingColor: string;
-}
-/**
- * Theme context value provided by ThemeProvider
- */
-interface ThemeContextValue {
-    theme: ResolvedTheme;
-}
-
-export type { ButtonVariantStyles as B, ColorPreset as C, ResolvedTheme as R, ThemeConfig as T, BackgroundStyles as a, ButtonVariantConfig as b, ThemeContextValue as c };