@delmaredigital/payload-puck 0.1.3 → 0.3.0

package/dist/components/AccordionClient.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AccordionClient - Client component for accordion interactivity
+ *
+ * This is the actual interactive accordion that uses useState.
+ * Imported by the server-safe AccordionConfig to enable client-side expansion.
+ */
+import { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { marginValueToCSS, paddingValueToCSS, dimensionsValueToCSS, backgroundValueToCSS, transformValueToCSS, colorValueToCSS, cn, } from '../fields/shared';
+import { AnimatedWrapper } from './AnimatedWrapper';
+// Accordion Item Component
+function AccordionItem({ item, isOpen, onToggle, textColorCSS, }) {
+    const textStyle = textColorCSS ? { color: textColorCSS } : {};
+    return (_jsxs("div", { className: "border-b border-border last:border-b-0", children: [_jsxs("button", { type: "button", onClick: onToggle, className: "flex w-full items-center justify-between py-4 px-4 text-left font-medium transition-all hover:bg-muted/50 text-foreground", style: textStyle, children: [_jsx("span", { children: item.title }), _jsx(ChevronDown, { className: cn('h-4 w-4 shrink-0 transition-transform duration-200', isOpen && 'rotate-180') })] }), _jsx("div", { className: cn('overflow-hidden transition-all duration-200', isOpen ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'), children: _jsx("div", { className: "px-4 pb-4 text-muted-foreground", style: textColorCSS ? { color: textColorCSS } : undefined, children: item.content }) })] }));
+}
+export function AccordionClient({ items, allowMultiple, textColor, margin, background, dimensions, transform, animation, customPadding, }) {
+    // Initialize open states from defaultOpen values
+    const [openItems, setOpenItems] = useState(() => {
+        const initialOpen = new Set();
+        items?.forEach((item, index) => {
+            if (item.defaultOpen) {
+                initialOpen.add(index);
+            }
+        });
+        return initialOpen;
+    });
+    const handleToggle = (index) => {
+        setOpenItems((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(index)) {
+                newSet.delete(index);
+            }
+            else {
+                if (!allowMultiple) {
+                    newSet.clear();
+                }
+                newSet.add(index);
+            }
+            return newSet;
+        });
+    };
+    const textColorCSS = colorValueToCSS(textColor);
+    const dimensionsStyles = dimensionsValueToCSS(dimensions);
+    // Theme-aware classes - uses CSS variables for colors
+    const accordionClasses = 'rounded-lg border border-border overflow-hidden bg-card';
+    const backgroundStyles = backgroundValueToCSS(background);
+    // Only apply background styles if explicitly set, otherwise let bg-card handle it
+    const accordionStyle = backgroundStyles && Object.keys(backgroundStyles).length > 0
+        ? backgroundStyles
+        : {};
+    const marginCSS = marginValueToCSS(margin);
+    const paddingCSS = paddingValueToCSS(customPadding);
+    const transformStyles = transformValueToCSS(transform);
+    const style = {
+        ...dimensionsStyles,
+        ...(marginCSS ? { margin: marginCSS } : {}),
+        ...(paddingCSS ? { padding: paddingCSS } : {}),
+        ...transformStyles,
+    };
+    if (!items || items.length === 0) {
+        return (_jsx(AnimatedWrapper, { animation: animation, children: _jsx("div", { style: Object.keys(style).length > 0 ? style : undefined, children: _jsx("div", { className: accordionClasses, style: accordionStyle, children: _jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No accordion items. Add items in the editor." }) }) }) }));
+    }
+    return (_jsx(AnimatedWrapper, { animation: animation, children: _jsx("div", { style: Object.keys(style).length > 0 ? style : undefined, children: _jsx("div", { className: accordionClasses, style: accordionStyle, children: items.map((item, index) => (_jsx(AccordionItem, { item: item, isOpen: openItems.has(index), onToggle: () => handleToggle(index), textColorCSS: textColorCSS }, index))) }) }) }));
+}
+//# sourceMappingURL=AccordionClient.js.map

package/dist/components/AccordionClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionClient.js","sourceRoot":"","sources":["../../src/components/AccordionClient.tsx"],"names":[],"mappings":"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"}

package/dist/components/AnimatedWrapper.d.ts

@@ -0,0 +1,33 @@
+/**
+ * AnimatedWrapper - Client component for scroll-triggered animations
+ *
+ * Wraps children with animation support using IntersectionObserver.
+ * Handles both preset entrance animations and custom transitions.
+ * Supports 27 animation presets with customizable intensity, easing, and origin.
+ */
+import type { ReactNode, CSSProperties, ElementType } from 'react';
+import { type AnimationValue } from '../fields/shared';
+export interface AnimatedWrapperProps {
+    /** Animation configuration from the component */
+    animation: AnimationValue | null | undefined;
+    /** Child content to animate */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** HTML element to render as (default: 'div') */
+    as?: ElementType;
+}
+/**
+ * Wraps children with scroll-triggered animation support.
+ *
+ * For preset animations: Applies initial/animate inline styles
+ * when element enters viewport.
+ *
+ * For custom animations: Applies CSS transition properties.
+ *
+ * If no animation is set, renders children without a wrapper div.
+ */
+export declare function AnimatedWrapper({ animation, children, className, style, as: Component, }: AnimatedWrapperProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AnimatedWrapper.d.ts.map

package/dist/components/AnimatedWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedWrapper.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedWrapper.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAElE,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,kBAAkB,CAAA;AAEzB,MAAM,WAAW,oBAAoB;IACnC,iDAAiD;IACjD,SAAS,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAA;IAC5C,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAA;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,iDAAiD;IACjD,EAAE,CAAC,EAAE,WAAW,CAAA;CACjB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,EAAE,EAAE,SAAiB,GACtB,EAAE,oBAAoB,2CAuEtB"}

package/dist/components/AnimatedWrapper.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useScrollAnimation } from '../hooks/useScrollAnimation';
+import { getEntranceAnimationStyles, animationValueToCSS, } from '../fields/shared';
+/**
+ * Wraps children with scroll-triggered animation support.
+ *
+ * For preset animations: Applies initial/animate inline styles
+ * when element enters viewport.
+ *
+ * For custom animations: Applies CSS transition properties.
+ *
+ * If no animation is set, renders children without a wrapper div.
+ */
+export function AnimatedWrapper({ animation, children, className, style, as: Component = 'div', }) {
+    // Check if animation should be applied
+    const hasAnimation = animation && ((animation.mode === 'preset' && animation.entrance && animation.entrance !== 'none') ||
+        animation.mode === 'custom');
+    // If no animation, render children directly without wrapper
+    if (!hasAnimation) {
+        // If there's a className or style, we still need to wrap
+        if (className || style) {
+            return _jsx(Component, { className: className, style: style, children: children });
+        }
+        return _jsx(_Fragment, { children: children });
+    }
+    // Use the scroll animation hook
+    const { ref, isInView } = useScrollAnimation({
+        triggerOnScroll: animation.triggerOnScroll ?? true,
+        threshold: animation.triggerThreshold ?? 0.1,
+        once: animation.triggerOnce ?? true,
+        rootMargin: animation.triggerMargin,
+    });
+    // Handle preset entrance animations
+    if (animation.mode === 'preset') {
+        const { initial, animate, duration, delay, easing, origin } = getEntranceAnimationStyles(animation);
+        // Apply initial or animate styles based on visibility
+        const animationStyles = isInView ? animate : initial;
+        // Build transition string with all relevant properties
+        const transitionProperties = [
+            `opacity ${duration}ms ${easing} ${delay}ms`,
+            `transform ${duration}ms ${easing} ${delay}ms`,
+            `filter ${duration}ms ${easing} ${delay}ms`,
+        ].join(', ');
+        return (_jsx(Component, { ref: ref, className: className, style: {
+                ...style,
+                ...animationStyles,
+                transition: transitionProperties,
+                transformOrigin: origin,
+            }, children: children }));
+    }
+    // Handle custom transition mode
+    const customStyles = animationValueToCSS(animation);
+    return (_jsx(Component, { ref: ref, className: className, style: {
+            ...style,
+            ...customStyles,
+            // Apply opacity for visibility-based transitions
+            opacity: isInView ? 1 : 0,
+        }, children: children }));
+}
+//# sourceMappingURL=AnimatedWrapper.js.map

package/dist/components/AnimatedWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedWrapper.js","sourceRoot":"","sources":["../../src/components/AnimatedWrapper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAWZ,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EACL,0BAA0B,EAC1B,mBAAmB,GAEpB,MAAM,kBAAkB,CAAA;AAezB;;;;;;;;;GASG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,EAAE,EAAE,SAAS,GAAG,KAAK,GACA;IACrB,uCAAuC;IACvC,MAAM,YAAY,GAAG,SAAS,IAAI,CAChC,CAAC,SAAS,CAAC,IAAI,KAAK,QAAQ,IAAI,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ,KAAK,MAAM,CAAC;QACpF,SAAS,CAAC,IAAI,KAAK,QAAQ,CAC5B,CAAA;IAED,4DAA4D;IAC5D,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,yDAAyD;QACzD,IAAI,SAAS,IAAI,KAAK,EAAE,CAAC;YACvB,OAAO,KAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAa,CAAA;QAC9E,CAAC;QACD,OAAO,4BAAG,QAAQ,GAAI,CAAA;IACxB,CAAC;IAED,gCAAgC;IAChC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,kBAAkB,CAAC;QAC3C,eAAe,EAAE,SAAS,CAAC,eAAe,IAAI,IAAI;QAClD,SAAS,EAAE,SAAS,CAAC,gBAAgB,IAAI,GAAG;QAC5C,IAAI,EAAE,SAAS,CAAC,WAAW,IAAI,IAAI;QACnC,UAAU,EAAE,SAAS,CAAC,aAAa;KACpC,CAAC,CAAA;IAEF,oCAAoC;IACpC,IAAI,SAAS,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAChC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAA;QAEnG,sDAAsD;QACtD,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAA;QAEpD,uDAAuD;QACvD,MAAM,oBAAoB,GAAG;YAC3B,WAAW,QAAQ,MAAM,MAAM,IAAI,KAAK,IAAI;YAC5C,aAAa,QAAQ,MAAM,MAAM,IAAI,KAAK,IAAI;YAC9C,UAAU,QAAQ,MAAM,MAAM,IAAI,KAAK,IAAI;SAC5C,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEZ,OAAO,CACL,KAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;gBACL,GAAG,KAAK;gBACR,GAAG,eAAe;gBAClB,UAAU,EAAE,oBAAoB;gBAChC,eAAe,EAAE,MAAM;aACxB,YAEA,QAAQ,GACC,CACb,CAAA;IACH,CAAC;IAED,gCAAgC;IAChC,MAAM,YAAY,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAA;IAEnD,OAAO,CACL,KAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,GAAG,KAAK;YACR,GAAG,YAAY;YACf,iDAAiD;YACjD,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1B,YAEA,QAAQ,GACC,CACb,CAAA;AACH,CAAC"}

package/dist/components/exports.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Individual component config exports
+ *
+ * This module exports individual Puck component configurations so users can
+ * cherry-pick components for their custom configs.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   SectionConfig,
+ *   HeadingConfig,
+ *   TextConfig,
+ * } from '@delmaredigital/payload-puck/components'
+ *
+ * export const myConfig: Config = {
+ *   components: {
+ *     Section: SectionConfig,
+ *     Heading: HeadingConfig,
+ *     Text: TextConfig,
+ *   },
+ *   // ...
+ * }
+ * ```
+ */
+export { ContainerConfig } from './layout/Container.js';
+export { FlexConfig } from './layout/Flex.js';
+export { GridConfig } from './layout/Grid.js';
+export { SectionConfig } from './layout/Section.js';
+export { SpacerConfig } from './layout/Spacer.js';
+export { TemplateConfig } from './layout/Template.js';
+export { HeadingConfig } from './typography/Heading.js';
+export { TextConfig } from './typography/Text.js';
+export { RichTextEditorConfig } from './typography/RichText.editor.js';
+export { RichTextConfig } from './typography/RichText.js';
+export { ImageConfig } from './media/Image.js';
+export { ButtonConfig } from './interactive/Button.js';
+export { CardConfig } from './interactive/Card.js';
+export { DividerConfig } from './interactive/Divider.js';
+export { AccordionConfig } from './interactive/Accordion.js';
+export { ContainerConfig as ContainerServerConfig } from './layout/Container.server.js';
+export { FlexConfig as FlexServerConfig } from './layout/Flex.server.js';
+export { GridConfig as GridServerConfig } from './layout/Grid.server.js';
+export { SectionConfig as SectionServerConfig } from './layout/Section.server.js';
+export { SpacerConfig as SpacerServerConfig } from './layout/Spacer.server.js';
+export { TemplateServerConfig } from './layout/Template.server.js';
+export { HeadingConfig as HeadingServerConfig } from './typography/Heading.server.js';
+export { TextConfig as TextServerConfig } from './typography/Text.server.js';
+export { RichTextConfig as RichTextServerConfig } from './typography/RichText.server.js';
+export { ImageConfig as ImageServerConfig } from './media/Image.server.js';
+export { ButtonConfig as ButtonServerConfig } from './interactive/Button.server.js';
+export { CardConfig as CardServerConfig } from './interactive/Card.server.js';
+export { DividerConfig as DividerServerConfig } from './interactive/Divider.server.js';
+export { AccordionConfig as AccordionServerConfig } from './interactive/Accordion.server.js';
+//# sourceMappingURL=exports.d.ts.map

package/dist/components/exports.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"exports.d.ts","sourceRoot":"","sources":["../../src/components/exports.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAOH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGrD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAA;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAS5D,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAA;AACvF,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AACxE,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AACxE,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AACjF,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAGlE,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACrF,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,EAAE,cAAc,IAAI,oBAAoB,EAAE,MAAM,iCAAiC,CAAA;AAGxF,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAG1E,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnF,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAC7E,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACtF,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,mCAAmC,CAAA"}

package/dist/components/exports.js

@@ -0,0 +1,71 @@
+'use client';
+/**
+ * Individual component config exports
+ *
+ * This module exports individual Puck component configurations so users can
+ * cherry-pick components for their custom configs.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   SectionConfig,
+ *   HeadingConfig,
+ *   TextConfig,
+ * } from '@delmaredigital/payload-puck/components'
+ *
+ * export const myConfig: Config = {
+ *   components: {
+ *     Section: SectionConfig,
+ *     Heading: HeadingConfig,
+ *     Text: TextConfig,
+ *   },
+ *   // ...
+ * }
+ * ```
+ */
+// =============================================================================
+// Editor Component Configs (for Puck Editor)
+// =============================================================================
+// Layout components
+export { ContainerConfig } from './layout/Container.js';
+export { FlexConfig } from './layout/Flex.js';
+export { GridConfig } from './layout/Grid.js';
+export { SectionConfig } from './layout/Section.js';
+export { SpacerConfig } from './layout/Spacer.js';
+export { TemplateConfig } from './layout/Template.js';
+// Typography components
+export { HeadingConfig } from './typography/Heading.js';
+export { TextConfig } from './typography/Text.js';
+export { RichTextEditorConfig } from './typography/RichText.editor.js';
+export { RichTextConfig } from './typography/RichText.js';
+// Media components
+export { ImageConfig } from './media/Image.js';
+// Interactive components
+export { ButtonConfig } from './interactive/Button.js';
+export { CardConfig } from './interactive/Card.js';
+export { DividerConfig } from './interactive/Divider.js';
+export { AccordionConfig } from './interactive/Accordion.js';
+// =============================================================================
+// Server Component Configs (for PageRenderer)
+// =============================================================================
+// These are SSR-safe variants without client-side interactivity.
+// Use these when building a custom baseConfig for PageRenderer.
+// Layout components (server)
+export { ContainerConfig as ContainerServerConfig } from './layout/Container.server.js';
+export { FlexConfig as FlexServerConfig } from './layout/Flex.server.js';
+export { GridConfig as GridServerConfig } from './layout/Grid.server.js';
+export { SectionConfig as SectionServerConfig } from './layout/Section.server.js';
+export { SpacerConfig as SpacerServerConfig } from './layout/Spacer.server.js';
+export { TemplateServerConfig } from './layout/Template.server.js';
+// Typography components (server)
+export { HeadingConfig as HeadingServerConfig } from './typography/Heading.server.js';
+export { TextConfig as TextServerConfig } from './typography/Text.server.js';
+export { RichTextConfig as RichTextServerConfig } from './typography/RichText.server.js';
+// Media components (server)
+export { ImageConfig as ImageServerConfig } from './media/Image.server.js';
+// Interactive components (server)
+export { ButtonConfig as ButtonServerConfig } from './interactive/Button.server.js';
+export { CardConfig as CardServerConfig } from './interactive/Card.server.js';
+export { DividerConfig as DividerServerConfig } from './interactive/Divider.server.js';
+export { AccordionConfig as AccordionServerConfig } from './interactive/Accordion.server.js';
+//# sourceMappingURL=exports.js.map

package/dist/components/exports.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"exports.js","sourceRoot":"","sources":["../../src/components/exports.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,gFAAgF;AAChF,6CAA6C;AAC7C,gFAAgF;AAEhF,oBAAoB;AACpB,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,wBAAwB;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAA;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAEzD,mBAAmB;AACnB,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,yBAAyB;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAE5D,gFAAgF;AAChF,8CAA8C;AAC9C,gFAAgF;AAChF,iEAAiE;AACjE,gEAAgE;AAEhE,6BAA6B;AAC7B,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAA;AACvF,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AACxE,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AACxE,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AACjF,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAElE,iCAAiC;AACjC,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACrF,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,EAAE,cAAc,IAAI,oBAAoB,EAAE,MAAM,iCAAiC,CAAA;AAExF,4BAA4B;AAC5B,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAE1E,kCAAkC;AAClC,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnF,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAC7E,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACtF,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,mCAAmC,CAAA"}

package/dist/components/index.d.ts

@@ -1,222 +1,11 @@
-import { ComponentConfig } from '@measured/puck';
-import { R as ResponsiveValue, D as DimensionsValue, P as PaddingValue, V as VisibilityValue } from '../shared-DeNKN95N.js';
-export { AnimatedWrapper, AnimatedWrapperProps } from '../AnimatedWrapper.js';
-import 'react/jsx-runtime';
-import 'react';
-
 /**
- * Container Component - Puck Configuration
+ * Puck Component Configurations
  *
- * Content wrapper with max-width and background options.
- * Uses Puck's slot system for nesting other components.
- * Uses Tailwind classes for layout, inline styles for dynamic user values.
- *
- * Supports both preset options and advanced custom styling:
- * - Outer (Section): background, customPadding, border (applies to full-width wrapper)
- * - Inner (Content): innerBackground, innerPadding, innerBorder (applies to max-width container)
- *
- * Responsive Controls:
- * - dimensions: Different max-width at different breakpoints
- * - customPadding: Different outer padding at different breakpoints
- * - innerPadding: Different inner padding at different breakpoints
- * - margin: Different margins at different breakpoints
- * - visibility: Show/hide at different breakpoints
- */
-
-declare const ContainerConfig: ComponentConfig;
-
-/**
- * Flex Component - Puck Configuration
- *
- * Flexbox layout following official Puck demo patterns.
- * Uses Tailwind classes for layout, inline styles for dynamic user values.
- *
- * Supports both preset options and advanced custom styling:
- * - Background: unified BackgroundField (solid, gradient, or image)
- * - Advanced: customPadding, customWidth, border
- *
- * Responsive Controls:
- * - dimensions: Different dimensions at different breakpoints
- * - customPadding: Different padding at different breakpoints
- * - margin: Different margins at different breakpoints
- * - visibility: Show/hide at different breakpoints
- */
-
-declare const FlexConfig: ComponentConfig;
-
-/**
- * Grid Component - Puck Configuration
- *
- * CSS Grid layout following official Puck demo patterns.
- * Responsive: stacks on mobile (flex column), grid on desktop (md+).
- * Uses Tailwind classes for layout, inline styles for dynamic user values.
- *
- * Supports both preset options and advanced custom styling:
- * - Background: unified BackgroundField (solid, gradient, or image)
- * - Advanced: customPadding, customWidth, border
- *
- * Responsive Controls:
- * - gap: Different gap at different breakpoints
- * - visibility: Show/hide at different breakpoints
- */
-
-declare const GridConfig: ComponentConfig;
-
-/**
- * Section Component - Puck Configuration
- *
- * Full-width section with background options and content slot.
- * Used as a top-level page section wrapper.
- * Uses Tailwind classes for layout, inline styles for dynamic user values.
- *
- * Supports both preset options and advanced custom styling:
- * - Background: unified BackgroundField (solid, gradient, or image)
- * - Advanced: customPadding, customWidth, border
- *
- * Responsive Controls:
- * - dimensions: Different dimensions at different breakpoints
- * - customPadding: Different padding at different breakpoints
- * - margin: Different margins at different breakpoints
- * - visibility: Show/hide at different breakpoints
- */
-
-declare const SectionConfig: ComponentConfig;
-
-/**
- * Spacer Component - Puck Configuration
- *
- * Simple spacing component for adding vertical or horizontal space.
- * Uses Tailwind classes for layout and sizing from predefined options.
- *
- * Responsive Controls:
- * - visibility: Show/hide at different breakpoints
- */
-
-declare const SpacerConfig: ComponentConfig;
-
-/**
- * Template Component - Puck Configuration
- *
- * A reusable template container that allows saving and loading
- * pre-configured component arrangements from the Payload CMS.
- *
- * Use this component to:
- * - Create reusable page sections
- * - Save common component patterns as templates
- * - Quickly load pre-built layouts
- *
- * Responsive Controls:
- * - dimensions: Different dimensions at different breakpoints
- * - customPadding: Different padding at different breakpoints
- * - margin: Different margins at different breakpoints
- * - visibility: Show/hide at different breakpoints
- */
-
-interface TemplateProps {
-    /** Slot for nested components */
-    content: unknown;
-    /** ID of the currently loaded template (or null if none) */
-    templateId: string | null;
-    /** Responsive dimensions */
-    dimensions: ResponsiveValue<DimensionsValue> | DimensionsValue | null;
-    /** Responsive padding */
-    customPadding: ResponsiveValue<PaddingValue> | PaddingValue | null;
-    /** Responsive margin */
-    margin: ResponsiveValue<PaddingValue> | PaddingValue | null;
-    /** Responsive visibility */
-    visibility: VisibilityValue | null;
-}
-declare const TemplateConfig: ComponentConfig;
-
-/**
- * Template Component - Server-safe Configuration
- *
- * A reusable template container for rendering nested components.
- * This server-safe version excludes the TemplateField (which requires client-side APIs).
- *
- * For the full editor experience with template loading, use Template.tsx
- *
- * Responsive Controls:
- * - dimensions: Different dimensions at different breakpoints
- * - customPadding: Different padding at different breakpoints
- * - margin: Different margins at different breakpoints
- * - visibility: Show/hide at different breakpoints
- */
-
-declare const TemplateServerConfig: ComponentConfig;
-
-/**
- * Heading Component - Puck Configuration
- *
- * H1-H6 headings with customizable styling.
- * Supports custom margin for spacing control.
- */
-
-declare const HeadingConfig: ComponentConfig;
-
-/**
- * Text Component - Puck Configuration
- *
- * Simple paragraph text with customizable styling.
- */
-
-declare const TextConfig: ComponentConfig;
-
-/**
- * RichText Component - Puck Server Configuration
- *
- * Server-safe config for rendering. Uses a simple textarea for the field.
- * The editor config (RichText.editor.tsx) uses Tiptap for the visual editor.
- */
-
-declare const RichTextConfig: ComponentConfig;
-
-declare const RichTextEditorConfig: ComponentConfig;
-
-/**
- * Image Component - Puck Configuration
- *
- * Standalone image block with optional link wrapper.
- * Server-safe version using standard HTML img element.
- *
- * Responsive Controls:
- * - visibility: Show/hide at different breakpoints
- */
-
-declare const ImageConfig: ComponentConfig;
-
-/**
- * Button Component - Puck Configuration
- *
- * CTA button with customizable styling and link support.
- */
-
-declare const ButtonConfig: ComponentConfig;
-
-/**
- * Card Component - Puck Configuration
- *
- * Content card with image, heading, and text.
- */
-
-declare const CardConfig: ComponentConfig;
-
-/**
- * Divider Component - Puck Configuration
- *
- * Horizontal line separator with customizable style.
- */
-
-declare const DividerConfig: ComponentConfig;
-
-/**
- * Accordion Component - Puck Configuration
- *
- * Expandable sections with collapsible content.
- * Uses plain HTML/CSS for the accordion behavior.
- * Supports custom margin for spacing control.
+ * All component configs for the Puck visual page builder.
  */
-
-declare const AccordionConfig: ComponentConfig;
-
-export { AccordionConfig, ButtonConfig, CardConfig, ContainerConfig, DividerConfig, FlexConfig, GridConfig, HeadingConfig, ImageConfig, RichTextConfig, RichTextEditorConfig, SectionConfig, SpacerConfig, TemplateConfig, type TemplateProps, TemplateServerConfig, TextConfig };
+export * from './layout';
+export * from './typography';
+export * from './media';
+export * from './interactive';
+export { AnimatedWrapper, type AnimatedWrapperProps } from './AnimatedWrapper';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,UAAU,CAAA;AAGxB,cAAc,cAAc,CAAA;AAG5B,cAAc,SAAS,CAAA;AAGvB,cAAc,eAAe,CAAA;AAG7B,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAA"}