@delmaredigital/payload-puck 0.1.0

package/dist/shared-DMAF1AcH.d.mts

@@ -0,0 +1,545 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { CustomField, Field } from '@measured/puck';
+
+interface MediaReference {
+    id: string | number;
+    url: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+}
+interface MediaFieldProps {
+    value: MediaReference | null;
+    onChange: (value: MediaReference | null) => void;
+    label?: string;
+    readOnly?: boolean;
+    apiEndpoint?: string;
+}
+declare function MediaFieldInner({ value, onChange, label, readOnly, apiEndpoint, }: MediaFieldProps): react_jsx_runtime.JSX.Element;
+declare const MediaField: React__default.MemoExoticComponent<typeof MediaFieldInner>;
+/**
+ * Creates a Puck field configuration for media selection
+ */
+declare function createMediaField(config: {
+    label?: string;
+    apiEndpoint?: string;
+}): CustomField<MediaReference | null>;
+
+/**
+ * Combines class names, filtering out falsy values
+ * A simple alternative to clsx/classnames for bundling purposes
+ */
+declare function cn(...classes: (string | boolean | undefined | null)[]): string;
+interface ColorValue {
+    hex: string;
+    opacity?: number;
+}
+interface PaddingValue {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    unit: 'px' | 'rem' | 'em' | '%';
+    /** Whether all sides are linked (sync together). Defaults to true if not set. */
+    linked?: boolean;
+}
+interface BorderValue {
+    style: 'none' | 'solid' | 'dashed' | 'dotted';
+    width: number;
+    color: ColorValue | null;
+    radius: number;
+    sides: {
+        top: boolean;
+        right: boolean;
+        bottom: boolean;
+        left: boolean;
+    };
+}
+interface WidthValue {
+    mode: 'full' | 'contained' | 'custom';
+    maxWidth: number;
+    unit: 'px' | 'rem' | '%' | 'vw';
+    alignment: 'left' | 'center' | 'right';
+}
+type DimensionsUnit = 'px' | 'rem' | '%' | 'vw' | 'vh';
+type DimensionsMode = 'full' | 'contained' | 'custom';
+type ContentAlignment = 'left' | 'center' | 'right';
+/**
+ * Represents a single dimension constraint (min or max for width or height)
+ */
+interface DimensionConstraint {
+    value: number;
+    unit: DimensionsUnit;
+    enabled: boolean;
+}
+/**
+ * Full dimensions configuration value - replaces/extends WidthValue
+ * Supports min/max constraints for both width and height
+ */
+interface DimensionsValue {
+    /** Width mode: full (100%), contained (centered max-width), or custom */
+    mode: DimensionsMode;
+    /** Content alignment within the container */
+    alignment: ContentAlignment;
+    /** Minimum width constraint (optional) */
+    minWidth?: DimensionConstraint | null;
+    /** Maximum width constraint (required for backward compat) */
+    maxWidth: DimensionConstraint;
+    /** Minimum height constraint (optional) */
+    minHeight?: DimensionConstraint | null;
+    /** Maximum height constraint (optional) */
+    maxHeight?: DimensionConstraint | null;
+    /** UI state: whether advanced mode is expanded */
+    advancedMode?: boolean;
+}
+/**
+ * Type guard to detect legacy WidthValue format
+ */
+declare function isLegacyWidthValue(value: unknown): value is WidthValue;
+/**
+ * Migrate legacy WidthValue to new DimensionsValue format
+ */
+declare function migrateWidthValue(legacy: WidthValue): DimensionsValue;
+interface GradientStop {
+    color: ColorValue;
+    position: number;
+}
+interface GradientValue {
+    type: 'linear' | 'radial';
+    angle: number;
+    stops: GradientStop[];
+    radialShape?: 'circle' | 'ellipse';
+    radialPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+}
+/**
+ * Gradient mask for fading images to transparent
+ */
+interface GradientMask {
+    enabled: boolean;
+    direction: 'to-top' | 'to-bottom' | 'to-left' | 'to-right' | 'to-top-left' | 'to-top-right' | 'to-bottom-left' | 'to-bottom-right' | 'from-center';
+    startOpacity: number;
+    endOpacity: number;
+    startPosition: number;
+    endPosition: number;
+}
+interface BackgroundImageValue {
+    media: MediaReference | null;
+    size: 'cover' | 'contain' | 'auto';
+    position: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    repeat: 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y';
+    attachment: 'scroll' | 'fixed';
+    /** Overall image opacity 0-100 (default 100) */
+    opacity?: number;
+    /** Gradient mask for fade to transparent effect */
+    mask?: GradientMask;
+}
+/**
+ * Overlay layer for images (Divi-style)
+ * Renders a color or gradient on top of the background image
+ */
+interface BackgroundOverlay {
+    enabled: boolean;
+    type: 'solid' | 'gradient';
+    solid?: ColorValue | null;
+    gradient?: GradientValue | null;
+}
+interface BackgroundValue {
+    type: 'none' | 'solid' | 'gradient' | 'image';
+    solid?: ColorValue | null;
+    gradient?: GradientValue | null;
+    image?: BackgroundImageValue | null;
+    /** Overlay layer, only used when type === 'image' */
+    overlay?: BackgroundOverlay | null;
+}
+declare const visibilityField: Field;
+declare const buttonStyleField: Field;
+declare const buttonVariantField: Field;
+declare const buttonSizeField: Field;
+declare const backgroundColorField: Field;
+declare const textColorField: Field;
+declare const gapField: Field;
+declare const shadowField: Field;
+declare const spacerHeightField: Field;
+declare const headingLevelField: Field;
+declare const textSizeField: Field;
+declare const aspectRatioField: Field;
+declare const dividerStyleField: Field;
+declare const borderRadiusField: Field;
+declare const columnsCountField: Field;
+declare const flexDirectionField: Field;
+declare const flexWrapField: Field;
+/**
+ * Maps alignment values to Tailwind classes
+ */
+declare const alignmentMap: Record<string, string>;
+/**
+ * Maps background color values to Tailwind classes
+ */
+declare const bgColorMap: Record<string, string>;
+/**
+ * Maps text color values to Tailwind classes
+ */
+declare const textColorMap: Record<string, string>;
+/**
+ * Maps gap values to Tailwind classes
+ */
+declare const gapMap: Record<string, string>;
+/**
+ * Maps shadow values to Tailwind classes
+ */
+declare const shadowMap: Record<string, string>;
+/**
+ * Maps spacer height values to Tailwind classes
+ */
+declare const spacerHeightMap: Record<string, string>;
+/**
+ * Maps heading level to Tailwind classes
+ */
+declare const headingLevelMap: Record<string, string>;
+/**
+ * Maps text size to Tailwind classes
+ */
+declare const textSizeMap: Record<string, string>;
+/**
+ * Maps aspect ratio to Tailwind classes
+ */
+declare const aspectRatioMap: Record<string, string>;
+/**
+ * Maps divider style to Tailwind classes
+ */
+declare const dividerStyleMap: Record<string, string>;
+/**
+ * Maps border radius to Tailwind classes
+ */
+declare const borderRadiusMap: Record<string, string>;
+/**
+ * Maps columns count to Tailwind grid classes (responsive)
+ */
+declare const columnsCountMap: Record<string, string>;
+/**
+ * Maps flex direction to Tailwind classes
+ */
+declare const flexDirectionMap: Record<string, string>;
+/**
+ * Maps justify content to Tailwind classes
+ * Supports both short (start) and full (flex-start) values
+ */
+declare const justifyContentMap: Record<string, string>;
+/**
+ * Maps align items to Tailwind classes
+ * Supports both short (start) and full (flex-start) values
+ */
+declare const alignItemsMap: Record<string, string>;
+/**
+ * Maps self-alignment to Tailwind classes (for grid/flex item alignment)
+ * Used by components like TextImageSplit for vertical self-alignment
+ */
+declare const selfAlignmentMap: Record<string, string>;
+/**
+ * Maps flex wrap to Tailwind classes
+ */
+declare const flexWrapMap: Record<string, string>;
+/**
+ * Convert ColorValue to CSS rgba string
+ */
+declare function colorValueToCSS(color: ColorValue | null | undefined): string | undefined;
+/**
+ * Convert PaddingValue to CSS padding string
+ */
+declare function paddingValueToCSS(padding: PaddingValue | null | undefined): string | undefined;
+/**
+ * Convert PaddingValue to CSS margin string (same structure, different property)
+ */
+declare function marginValueToCSS(margin: PaddingValue | null | undefined): string | undefined;
+/**
+ * Convert BorderValue to CSS properties object
+ */
+declare function borderValueToCSS(border: BorderValue | null | undefined): React__default.CSSProperties | undefined;
+/**
+ * Convert WidthValue to CSS properties object
+ */
+declare function widthValueToCSS(width: WidthValue | null | undefined): React__default.CSSProperties | undefined;
+/**
+ * Convert DimensionsValue to CSS properties object
+ * Handles both legacy WidthValue and new DimensionsValue formats
+ */
+declare function dimensionsValueToCSS(dimensions: DimensionsValue | WidthValue | null | undefined): React__default.CSSProperties | undefined;
+/**
+ * Get human-readable summary of dimensions
+ */
+declare function getDimensionsSummary(dim: DimensionsValue | null | undefined): string;
+/**
+ * Combined style generator for layout components
+ */
+declare function getCustomStyleObject(options: {
+    backgroundColor?: ColorValue | null;
+    textColor?: ColorValue | null;
+    padding?: PaddingValue | null;
+    margin?: PaddingValue | null;
+    border?: BorderValue | null;
+    width?: WidthValue | null;
+}): React__default.CSSProperties;
+/**
+ * Convert GradientValue to CSS gradient string
+ */
+declare function gradientValueToCSS(gradient: GradientValue | null | undefined): string;
+/**
+ * Result of background CSS conversion
+ * Includes both styles and metadata for consumer components
+ */
+interface BackgroundCSSResult {
+    /** CSS properties to apply directly */
+    styles: React__default.CSSProperties;
+    /** Image opacity (0-1) - consumer should apply via wrapper if needed */
+    imageOpacity?: number;
+}
+/**
+ * Convert BackgroundValue to CSS properties object
+ * Returns both styles and metadata for advanced features like image opacity
+ */
+declare function backgroundValueToCSS(bg: BackgroundValue | null | undefined): React__default.CSSProperties;
+/**
+ * Get image opacity from BackgroundValue (for consumer wrapper components)
+ * Returns undefined if no image or opacity is 100%
+ */
+declare function getBackgroundImageOpacity(bg: BackgroundValue | null | undefined): number | undefined;
+/**
+ * Check if any custom style values are set
+ */
+declare function hasCustomStyles(options: {
+    backgroundColor?: ColorValue | null;
+    textColor?: ColorValue | null;
+    padding?: PaddingValue | null;
+    margin?: PaddingValue | null;
+    border?: BorderValue | null;
+    width?: WidthValue | null;
+}): boolean;
+type TransformOrigin = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface TransformValue {
+    rotate: number;
+    scaleX: number;
+    scaleY: number;
+    scaleLocked: boolean;
+    skewX: number;
+    skewY: number;
+    translateX: number;
+    translateY: number;
+    translateUnit: 'px' | 'rem' | '%';
+    origin: TransformOrigin;
+    enable3D: boolean;
+    perspective?: number;
+    rotateX?: number;
+    rotateY?: number;
+}
+/**
+ * Default transform value
+ */
+declare const DEFAULT_TRANSFORM: TransformValue;
+/**
+ * Convert TransformValue to CSS properties object
+ */
+declare function transformValueToCSS(transform: TransformValue | null | undefined): React__default.CSSProperties | undefined;
+type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Responsive value that can have different values at different breakpoints.
+ * Base is required, other breakpoints are optional overrides.
+ */
+interface ResponsiveValue<T> {
+    base: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+}
+/**
+ * Breakpoint configuration with labels and pixel values
+ */
+declare const BREAKPOINTS: Array<{
+    key: Breakpoint;
+    label: string;
+    minWidth: number | null;
+}>;
+/**
+ * Type guard to check if a value is a ResponsiveValue (has breakpoint structure)
+ */
+declare function isResponsiveValue<T>(value: unknown): value is ResponsiveValue<T>;
+/**
+ * Converts React.CSSProperties to a CSS string for use in style tags
+ */
+declare function cssPropertiesToString(styles: React__default.CSSProperties): string;
+/**
+ * Result of converting a responsive value to CSS
+ */
+interface ResponsiveCSSResult {
+    /** Base styles to apply as inline styles */
+    baseStyles: React__default.CSSProperties;
+    /** CSS media queries to render in a <style> tag */
+    mediaQueryCSS: string;
+}
+/**
+ * Converts a ResponsiveValue to CSS with media queries.
+ * Works with any value type that has a CSS converter function.
+ *
+ * @param value - The responsive or non-responsive value
+ * @param converter - Function to convert the value type to CSSProperties
+ * @param uniqueId - Unique class name for targeting in media queries
+ * @returns Object with baseStyles (inline) and mediaQueryCSS (for <style> tag)
+ *
+ * @example
+ * ```tsx
+ * const { baseStyles, mediaQueryCSS } = responsiveValueToCSS(
+ *   dimensions,
+ *   dimensionsValueToCSS,
+ *   'container-abc123'
+ * )
+ *
+ * return (
+ *   <>
+ *     {mediaQueryCSS && <style>{mediaQueryCSS}</style>}
+ *     <div className="container-abc123" style={baseStyles}>...</div>
+ *   </>
+ * )
+ * ```
+ */
+declare function responsiveValueToCSS<T>(value: ResponsiveValue<T> | T | null | undefined, converter: (v: T) => React__default.CSSProperties | undefined, uniqueId: string): ResponsiveCSSResult;
+/**
+ * Visibility value for show/hide per breakpoint
+ */
+interface VisibilityValue {
+    /** Base visibility - true = visible, false = hidden (default: true) */
+    base: boolean;
+    /** Override for small screens (640px+) */
+    sm?: boolean;
+    /** Override for medium screens (768px+) */
+    md?: boolean;
+    /** Override for large screens (1024px+) */
+    lg?: boolean;
+    /** Override for extra large screens (1280px+) */
+    xl?: boolean;
+}
+/**
+ * Default visibility value (visible at all breakpoints)
+ */
+declare const DEFAULT_VISIBILITY: VisibilityValue;
+/**
+ * Converts a VisibilityValue to CSS with display: none media queries.
+ *
+ * @param visibility - The visibility settings per breakpoint
+ * @param uniqueId - Unique class name for targeting in media queries
+ * @returns CSS media queries string for hiding at specific breakpoints
+ */
+declare function visibilityValueToCSS(visibility: VisibilityValue | null | undefined, uniqueId: string): string;
+/** Standard CSS easing functions */
+type EasingFunction = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+/** Advanced easing with spring/bounce effects via cubic-bezier approximations */
+type AdvancedEasingFunction = EasingFunction | 'spring' | 'spring-gentle' | 'bounce' | 'bounce-in' | 'bounce-out' | 'back-in' | 'back-out' | 'back-in-out' | 'elastic';
+/** Map advanced easing to CSS cubic-bezier values */
+declare const EASING_CSS_MAP: Record<AdvancedEasingFunction, string>;
+/** Transform origin for animations (3x3 grid) */
+type AnimationOrigin = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** Stagger direction for child animations */
+type StaggerDirection = 'forward' | 'reverse' | 'center' | 'edges';
+/** Configuration for staggered child animations */
+interface StaggerConfig {
+    enabled: boolean;
+    /** Delay between each child element (ms) */
+    delay: number;
+    /** Maximum total delay to prevent very long animations */
+    maxDelay?: number;
+    /** Direction of stagger effect */
+    direction: StaggerDirection;
+}
+/** Animation categories for UI organization */
+type AnimationCategory = 'fade' | 'scale' | 'slide' | 'blur' | 'rotate' | 'bounce' | 'flip' | 'zoom';
+/**
+ * Extended entrance animation presets (27 total)
+ * Organized by category for the UI dropdown
+ */
+type EntranceAnimation = 'none' | 'fade-in' | 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right' | 'fade-scale' | 'scale-in' | 'scale-up' | 'scale-down' | 'scale-out' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'blur-in' | 'blur-up' | 'blur-down' | 'rotate-in' | 'rotate-up' | 'rotate-down' | 'bounce-in' | 'bounce-up' | 'bounce-down' | 'flip-x' | 'flip-y' | 'zoom-in' | 'zoom-out';
+/**
+ * Animation presets organized by category for UI
+ */
+declare const ANIMATION_CATEGORIES: Array<{
+    category: AnimationCategory | 'none';
+    label: string;
+    animations: EntranceAnimation[];
+}>;
+interface AnimationValue {
+    mode: 'preset' | 'custom';
+    entrance?: EntranceAnimation;
+    entranceDuration?: number;
+    entranceDelay?: number;
+    /** Distance for translate animations (8-200px) */
+    distance?: number;
+    /** Starting scale for scale animations (0.1-2) */
+    scaleFrom?: number;
+    /** Rotation angle for rotate animations (-180 to 180deg) */
+    rotateAngle?: number;
+    /** Blur amount for blur animations (0-50px) */
+    blurAmount?: number;
+    origin?: AnimationOrigin;
+    easing?: AdvancedEasingFunction;
+    stagger?: StaggerConfig;
+    duration?: number;
+    delay?: number;
+    triggerOnScroll?: boolean;
+    triggerThreshold?: number;
+    triggerOnce?: boolean;
+    /** Margin around viewport for earlier/later triggering (e.g., "0px 0px -100px 0px") */
+    triggerMargin?: string;
+}
+/**
+ * Convert AnimationValue to CSS transition property (for custom mode)
+ * Returns undefined for preset mode - use getEntranceAnimationStyles instead
+ */
+declare function animationValueToCSS(anim: AnimationValue | null): React__default.CSSProperties | undefined;
+/**
+ * Get initial and animate styles for entrance animations
+ * Returns inline CSS style objects that work without Tailwind compilation
+ * Supports all 27 animation presets with customizable intensity
+ */
+declare function getEntranceAnimationStyles(anim: AnimationValue | null): {
+    initial: React__default.CSSProperties;
+    animate: React__default.CSSProperties;
+    duration: number;
+    delay: number;
+    easing: string;
+    origin: string;
+};
+/**
+ * Get default easing for animation category
+ * Bounce animations default to bounce easing, etc.
+ */
+declare function getDefaultEasingForAnimation(entrance: EntranceAnimation): AdvancedEasingFunction;
+/**
+ * Get CSS custom properties for animation timing
+ * Useful for CSS-only animations with custom properties
+ */
+declare function getAnimationCSSVariables(anim: AnimationValue | null): Record<string, string>;
+/**
+ * Generate stagger delay for a specific child index
+ * Accounts for direction (forward, reverse, center, edges)
+ */
+declare function getStaggerDelay(config: StaggerConfig, index: number, totalChildren: number): number;
+/**
+ * Generate CSS styles for staggered children
+ * Returns an object with CSS custom properties for each child
+ */
+declare function generateStaggerStyles(config: StaggerConfig | undefined, totalChildren: number): React__default.CSSProperties[];
+/**
+ * Check which intensity controls are relevant for an animation type
+ */
+declare function getRelevantIntensityControls(entrance: EntranceAnimation): {
+    showDistance: boolean;
+    showScale: boolean;
+    showRotate: boolean;
+    showBlur: boolean;
+};
+/**
+ * Default animation value
+ */
+declare const DEFAULT_ANIMATION: AnimationValue;
+declare const layoutComponentsDisallow: string[];
+
+export { DEFAULT_ANIMATION as $, type AnimationValue as A, type BackgroundValue as B, type ColorValue as C, type DimensionsValue as D, type EasingFunction as E, type AdvancedEasingFunction as F, type GradientValue as G, type EntranceAnimation as H, type AnimationOrigin as I, type AnimationCategory as J, type StaggerDirection as K, animationValueToCSS as L, MediaField as M, getEntranceAnimationStyles as N, getAnimationCSSVariables as O, type PaddingValue as P, getDefaultEasingForAnimation as Q, type ResponsiveValue as R, type StaggerConfig as S, type TransformValue as T, getRelevantIntensityControls as U, type VisibilityValue as V, type WidthValue as W, getStaggerDelay as X, generateStaggerStyles as Y, EASING_CSS_MAP as Z, ANIMATION_CATEGORIES as _, type BorderValue as a, type TransformOrigin as a0, transformValueToCSS as a1, DEFAULT_TRANSFORM as a2, cn as a3, visibilityField as a4, buttonStyleField as a5, buttonVariantField as a6, buttonSizeField as a7, backgroundColorField as a8, textColorField as a9, selfAlignmentMap as aA, flexWrapMap as aB, colorValueToCSS as aC, paddingValueToCSS as aD, marginValueToCSS as aE, borderValueToCSS as aF, widthValueToCSS as aG, getCustomStyleObject as aH, type BackgroundCSSResult as aI, hasCustomStyles as aJ, layoutComponentsDisallow as aK, gapField as aa, shadowField as ab, spacerHeightField as ac, headingLevelField as ad, textSizeField as ae, aspectRatioField as af, dividerStyleField as ag, borderRadiusField as ah, columnsCountField as ai, flexDirectionField as aj, flexWrapField as ak, alignmentMap as al, bgColorMap as am, textColorMap as an, gapMap as ao, shadowMap as ap, spacerHeightMap as aq, headingLevelMap as ar, textSizeMap as as, aspectRatioMap as at, dividerStyleMap as au, borderRadiusMap as av, columnsCountMap as aw, flexDirectionMap as ax, justifyContentMap as ay, alignItemsMap as az, type MediaReference as b, createMediaField as c, dimensionsValueToCSS as d, type DimensionConstraint as e, type DimensionsUnit as f, getDimensionsSummary as g, type DimensionsMode as h, isLegacyWidthValue as i, type ContentAlignment as j, type BackgroundImageValue as k, type BackgroundOverlay as l, migrateWidthValue as m, type GradientStop as n, type GradientMask as o, backgroundValueToCSS as p, gradientValueToCSS as q, getBackgroundImageOpacity as r, type Breakpoint as s, type ResponsiveCSSResult as t, BREAKPOINTS as u, isResponsiveValue as v, responsiveValueToCSS as w, cssPropertiesToString as x, visibilityValueToCSS as y, DEFAULT_VISIBILITY as z };