storefront-layouts-staging 1.0.0-staging.0

package/dist/editor/payaza-form/components/FieldDensityContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDensityContext.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/FieldDensityContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;AAIjD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC1C,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAEA,CAAC;AAEF,wBAAgB,eAAe,IAAI,YAAY,CAE9C;AAED,0CAA0C;AAC1C,wBAAgB,mBAAmB,CAAC,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,CAGzE"}

package/dist/editor/payaza-form/components/FieldDensityContext.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const FieldDensityContext = createContext('default');
+export const FieldDensityProvider = ({ density, children }) => (_jsx(FieldDensityContext.Provider, { value: density, children: children }));
+export function useFieldDensity() {
+    return useContext(FieldDensityContext);
+}
+/** Resolve explicit prop over context. */
+export function resolveFieldDensity(explicit) {
+    const ctx = useContext(FieldDensityContext);
+    return explicit ?? ctx;
+}

package/dist/editor/payaza-form/components/IconField.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type FieldDensity } from './FieldDensityContext';
+interface IconFieldProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    density?: FieldDensity;
+}
+export declare const IconField: React.FC<IconFieldProps>;
+export {};
+//# sourceMappingURL=IconField.d.ts.map

package/dist/editor/payaza-form/components/IconField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/IconField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE/E,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAUD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgJ9C,CAAC"}

package/dist/editor/payaza-form/components/IconField.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ChevronDown, Search, HelpCircle } from 'lucide-react';
+import { ICON_MAP, COMMON_ICON_NAMES } from '../../../components/ui/dynamic-icon.js';
+import { resolveFieldDensity } from './FieldDensityContext.js';
+/** Match persisted / hand-typed icon ids to Lucide map keys (case-insensitive). */
+function resolveIconMapKey(raw) {
+    if (!raw?.trim())
+        return null;
+    const t = raw.trim();
+    if (ICON_MAP[t])
+        return t;
+    return Object.keys(ICON_MAP).find((k) => k.toLowerCase() === t.toLowerCase()) ?? null;
+}
+export const IconField = ({ label, value, onChange, placeholder, density: densityProp, }) => {
+    const density = resolveFieldDensity(densityProp);
+    const compact = density === 'compact';
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const resolvedKey = resolveIconMapKey(value);
+    const SelectedIconComponent = resolvedKey
+        ? ICON_MAP[resolvedKey]
+        : value?.trim()
+            ? HelpCircle
+            : null;
+    const filteredIcons = COMMON_ICON_NAMES.filter((name) => name.toLowerCase().includes(searchTerm.toLowerCase()));
+    return (_jsxs("div", { className: `group/icon relative flex flex-col ${compact ? 'gap-1.5' : 'gap-2.5'}`, children: [_jsx("label", { className: `px-0.5 font-semibold uppercase tracking-[0.06em] ${compact ? 'text-[10px] text-[#1b0029]/40' : 'text-[11px] text-[#1b0029]/75'}`, children: label }), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: `flex w-full items-center justify-between rounded-md border bg-white text-left text-[13px] font-medium transition-all focus:outline-none focus:ring-2 focus:ring-[#440066]/15 ${compact ? 'h-10 px-3 shadow-none' : 'h-11 px-3.5 shadow-[0_1px_2px_rgba(27,0,41,0.04)]'} ${isOpen
+                            ? 'border-[#440066]/45 ring-2 ring-[#440066]/12'
+                            : 'border-black/[0.1] hover:border-black/[0.14]'}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-7 w-7 items-center justify-center rounded-md transition-all duration-200 ${SelectedIconComponent
+                                            ? 'bg-[#1b0029] text-white'
+                                            : 'bg-[#f0eef5] text-[#1b0029]/65'}`, children: SelectedIconComponent ? (_jsx(SelectedIconComponent, { size: 16, strokeWidth: 2.5, className: "shrink-0 text-white", "aria-hidden": true })) : (_jsx(HelpCircle, { size: 16, strokeWidth: 2.5 })) }), _jsx("span", { className: value ? 'text-[#1b0029]' : 'text-[#1b0029]/60', children: value || placeholder || 'Select an icon…' })] }), _jsx(ChevronDown, { className: `h-4 w-4 shrink-0 text-[#1b0029]/35 transition-transform duration-200 ${isOpen ? 'rotate-180 text-[#440066]' : ''}`, strokeWidth: 2 })] }), isOpen && (_jsxs("div", { className: "animate-in fade-in slide-in-from-top-2 absolute z-50 mt-2 w-full overflow-hidden rounded-md border border-black/[0.1] bg-white shadow-[0_8px_24px_rgba(27,0,41,0.12)] duration-200", children: [_jsx("div", { className: "border-b border-black/[0.06] bg-[#fafafa]/90 px-3 py-3", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#1b0029]/35", strokeWidth: 2 }), _jsx("input", { type: "text", autoFocus: true, className: "h-10 w-full rounded-md border border-black/[0.1] bg-white pl-10 pr-3 text-[12px] font-medium text-[#1b0029] placeholder:text-[#1b0029]/35 focus:border-[#440066]/45 focus:outline-none focus:ring-2 focus:ring-[#440066]/12", placeholder: "Search icons\u2026", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }) }), _jsxs("div", { className: "custom-scrollbar grid max-h-[280px] grid-cols-4 gap-2 overflow-y-auto p-2", children: [filteredIcons.map((name) => {
+                                        const IconComp = ICON_MAP[name] ?? HelpCircle;
+                                        return (_jsx("button", { type: "button", title: name, onClick: () => {
+                                                onChange(name);
+                                                setIsOpen(false);
+                                                setSearchTerm('');
+                                            }, className: `flex aspect-square flex-col items-center justify-center rounded-md border-2 transition-all duration-150 ${resolvedKey === name ||
+                                                (value || '').trim().toLowerCase() === name.toLowerCase()
+                                                ? 'border-[#440066] bg-white text-black shadow-sm'
+                                                : 'border-transparent text-[#1b0029]/80 hover:border-[#440066]/30 hover:bg-[#F7F5F0] hover:text-[#440066]'}`, children: _jsx(IconComp, { size: 20, strokeWidth: 2.5, className: "shrink-0" }) }, name));
+                                    }), filteredIcons.length === 0 && (_jsx("div", { className: "col-span-4 flex flex-col items-center gap-2 py-8", children: _jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.08em] text-[#1b0029]/35", children: "No matching icons" }) }))] }), _jsxs("div", { className: "border-t border-black/[0.06] bg-[#fafafa]/90 px-3 py-3", children: [_jsx("label", { className: "mb-1.5 block text-[10px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]/45", children: "Custom ID" }), _jsx("input", { type: "text", className: "h-9 w-full rounded-md border border-black/[0.1] bg-white px-3 text-[11px] font-medium text-[#1b0029] focus:border-[#440066]/45 focus:outline-none focus:ring-2 focus:ring-[#440066]/12", value: value || '', placeholder: "Enter icon name\u2026", onChange: (e) => onChange(e.target.value), onClick: (e) => e.stopPropagation() })] })] }))] }), isOpen && _jsx("div", { className: "fixed inset-0 z-40", onClick: () => setIsOpen(false) })] }));
+};

package/dist/editor/payaza-form/components/ImageField.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ImageFieldProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}
+export declare const ImageField: React.FC<ImageFieldProps>;
+export {};
+//# sourceMappingURL=ImageField.d.ts.map

package/dist/editor/payaza-form/components/ImageField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/ImageField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiHhD,CAAC"}

package/dist/editor/payaza-form/components/ImageField.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Link2, X, Upload } from 'lucide-react';
+import { useAssetSelection } from '../AssetSelectionContext.js';
+export const ImageField = ({ label, value, onChange, placeholder, }) => {
+    const hasImage = value && value.startsWith('http');
+    const [isHovered, setIsHovered] = React.useState(false);
+    const urlInputRef = React.useRef(null);
+    const { onOpenAssetSelect, isAssetLibraryAvailable } = useAssetSelection();
+    const handleReplace = React.useCallback(() => {
+        if (isAssetLibraryAvailable) {
+            onOpenAssetSelect((selectedUrl) => {
+                onChange(selectedUrl);
+            });
+        }
+        else {
+            const url = typeof window !== 'undefined' ? window.prompt('Paste image URL') : null;
+            if (url?.trim())
+                onChange(url.trim());
+        }
+    }, [isAssetLibraryAvailable, onOpenAssetSelect, onChange]);
+    return (_jsxs("div", { className: "group/field flex flex-col gap-2.5", children: [_jsxs("div", { className: "flex items-center justify-between px-0.5", children: [_jsx("label", { className: "text-[11px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]/45 transition-colors group-focus-within/field:text-[#1b0029]/70", children: label }), hasImage && (_jsx("span", { className: "rounded border border-[#440066]/20 bg-[#440066]/08 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-[#440066]", children: "Set" }))] }), _jsxs("div", { className: "space-y-3", children: [hasImage ? (_jsxs("div", { className: "group/img relative flex aspect-[16/9] items-center justify-center overflow-hidden rounded-md border border-black/[0.1] bg-[#fafafa] shadow-[0_1px_2px_rgba(27,0,41,0.04)] transition-colors hover:border-black/[0.14]", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("img", { src: value, alt: label, className: "h-full w-full object-cover transition-transform duration-500 group-hover/img:scale-[1.02]", onError: (e) => {
+                                    e.target.style.display = 'none';
+                                } }), _jsx("div", { className: `absolute inset-0 flex flex-col items-center justify-center gap-2 bg-[#1b0029]/45 backdrop-blur-[2px] transition-opacity duration-200 ${isHovered ? 'opacity-100' : 'opacity-0'}`, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: () => onChange(''), className: "flex h-9 w-9 items-center justify-center rounded-md border border-white/40 bg-white/15 text-white transition-colors hover:bg-[#D16253]/90", title: "Remove image", children: _jsx(X, { size: 16, strokeWidth: 2.5 }) }), _jsxs("button", { type: "button", onClick: handleReplace, className: "flex items-center gap-2 rounded-md bg-white px-4 py-2 text-[11px] font-semibold text-[#1b0029] shadow-sm transition-transform hover:scale-[1.02] active:scale-[0.98]", title: isAssetLibraryAvailable ? 'Replace from library' : 'Replace', children: [_jsx(Upload, { size: 14, strokeWidth: 2.5 }), "Replace"] })] }) })] })) : (_jsxs("button", { type: "button", onClick: () => {
+                            if (isAssetLibraryAvailable)
+                                handleReplace();
+                            else
+                                urlInputRef.current?.focus();
+                        }, className: "flex w-full flex-col items-center justify-center gap-3 rounded-md border-2 border-dashed border-black/[0.1] bg-white px-6 py-8 text-center transition-colors hover:border-[#440066]/35 hover:bg-[#F7F5F0]/80", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-md border border-black/[0.06] bg-[#F7F5F0] text-[#1b0029]/45", children: _jsx(Upload, { size: 22, strokeWidth: 2 }) }), _jsxs("div", { children: [_jsx("span", { className: "block text-[12px] font-semibold text-[#1b0029]", children: isAssetLibraryAvailable ? 'Choose from library' : 'Add image URL below' }), _jsx("span", { className: "mt-1 block text-[11px] text-[#1b0029]/45", children: "PNG, JPG, WEBP" })] })] })), _jsxs("div", { className: "relative group/input", children: [_jsx("div", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[#1b0029]/35 transition-colors group-focus-within/input:text-[#440066]/70", children: _jsx(Link2, { size: 14, strokeWidth: 2, "aria-hidden": true }) }), _jsx("input", { ref: urlInputRef, type: "text", className: "h-11 w-full rounded-md border border-black/[0.1] bg-white pl-9 pr-3 text-[13px] font-medium text-[#1b0029] shadow-[0_1px_2px_rgba(27,0,41,0.04)] transition-colors placeholder:text-[#1b0029]/35 focus:border-[#440066]/45 focus:outline-none focus:ring-2 focus:ring-[#440066]/15 group-hover/input:border-black/[0.14]", value: value || '', placeholder: placeholder || 'Paste image URL…', onChange: (e) => onChange(e.target.value) })] })] })] }));
+};

package/dist/editor/payaza-form/components/NumberField.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type FieldDensity } from './FieldDensityContext';
+interface NumberFieldProps {
+    label: string;
+    value: number;
+    onChange: (value: number) => void;
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    density?: FieldDensity;
+}
+export declare const NumberField: React.FC<NumberFieldProps>;
+export {};
+//# sourceMappingURL=NumberField.d.ts.map

package/dist/editor/payaza-form/components/NumberField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE/E,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4ElD,CAAC"}

package/dist/editor/payaza-form/components/NumberField.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Plus, Minus } from 'lucide-react';
+import { resolveFieldDensity } from './FieldDensityContext.js';
+export const NumberField = ({ label, value, onChange, placeholder, min, max, density: densityProp, }) => {
+    const density = resolveFieldDensity(densityProp);
+    const compact = density === 'compact';
+    const increment = () => {
+        const newVal = (value || 0) + 1;
+        if (max !== undefined && newVal > max)
+            return;
+        onChange(newVal);
+    };
+    const decrement = () => {
+        const newVal = (value || 0) - 1;
+        if (min !== undefined && newVal < min)
+            return;
+        onChange(newVal);
+    };
+    return (_jsxs("div", { className: `group/field flex flex-col ${compact ? 'gap-1.5' : 'gap-2.5'}`, children: [_jsx("label", { className: `px-0.5 font-semibold uppercase tracking-[0.06em] transition-colors group-focus-within/field:text-[#1b0029]/70 ${compact ? 'text-[10px] text-[#1b0029]/40' : 'text-[11px] text-[#1b0029]/45'}`, children: label }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "relative flex-1 group/container", children: _jsx("input", { type: "number", className: `w-full rounded-md border border-black/[0.1] bg-white px-3.5 text-[13px] font-medium text-[#1b0029] transition-colors [appearance:textfield] placeholder:text-[#1b0029]/35 focus:border-[#440066]/45 focus:outline-none focus:ring-2 focus:ring-[#440066]/15 group-hover/container:border-black/[0.14] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none ${compact ? 'h-10 shadow-none' : 'h-11 shadow-[0_1px_2px_rgba(27,0,41,0.04)]'}`, value: value ?? '', placeholder: placeholder || '0', min: min, max: max, onChange: (e) => {
+                                const numValue = e.target.value === '' ? 0 : Number(e.target.value);
+                                onChange(numValue);
+                            } }) }), _jsxs("div", { className: `flex shrink-0 items-center rounded-md border border-black/[0.08] p-0.5 ${compact ? 'bg-transparent' : 'bg-[#fafafa]'}`, children: [_jsx("button", { type: "button", onClick: decrement, className: "rounded-[5px] p-2 text-[#1b0029]/45 transition-colors hover:bg-white hover:text-[#1b0029]", "aria-label": "Decrease", children: _jsx(Minus, { size: 14, strokeWidth: 2.5 }) }), _jsx("div", { className: "mx-0.5 h-4 w-px bg-black/[0.08]" }), _jsx("button", { type: "button", onClick: increment, className: "rounded-[5px] p-2 text-[#1b0029]/45 transition-colors hover:bg-white hover:text-[#440066]", "aria-label": "Increase", children: _jsx(Plus, { size: 14, strokeWidth: 2.5 }) })] })] })] }));
+};

package/dist/editor/payaza-form/components/ObjectField.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ObjectFieldProps {
+    label: string;
+    children: React.ReactNode;
+}
+/**
+ * Nested field group — subtle container matching Site Editor–style panels.
+ */
+export declare const ObjectField: React.FC<ObjectFieldProps>;
+export {};
+//# sourceMappingURL=ObjectField.d.ts.map

package/dist/editor/payaza-form/components/ObjectField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/ObjectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAWlD,CAAC"}

package/dist/editor/payaza-form/components/ObjectField.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Nested field group — subtle container matching Site Editor–style panels.
+ */
+export const ObjectField = ({ label, children }) => {
+    return (_jsxs("div", { className: "border-b border-black/[0.06] pb-5 last:border-b-0 last:pb-0", children: [_jsx("p", { className: "mb-3 text-[11px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]/65", children: label }), _jsx("div", { className: "space-y-5 rounded-md border border-black/[0.06] bg-white px-3 py-4 md:px-3.5", children: children })] }));
+};

package/dist/editor/payaza-form/components/RichTextField.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { PayazaRichTextStored } from '../../../lib/rich-html';
+import { type FieldDensity } from './FieldDensityContext';
+interface RichTextFieldProps {
+    label: string;
+    value: unknown;
+    onChange: (next: PayazaRichTextStored) => void;
+    placeholder?: string;
+    multiline?: boolean;
+    density?: FieldDensity;
+}
+/** Visual editor (WordPress-like): formatted text only — raw HTML tags are hidden. Prefer canvas inline edit for parity. */
+export declare const RichTextField: React.FC<RichTextFieldProps>;
+export {};
+//# sourceMappingURL=RichTextField.d.ts.map

package/dist/editor/payaza-form/components/RichTextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/RichTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AACpF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAUnE,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE/E,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AASD,4HAA4H;AAC5H,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsLtD,CAAC"}

package/dist/editor/payaza-form/components/RichTextField.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useRef, useCallback, useLayoutEffect, useState } from 'react';
+import { buildPayazaRichCommitFromEditorHtml, coercePayazaRichLinkHref, normalizeStoredRichValue, coerceRichSidebarEditorString, PAYAZA_RICH_HTML_POLICY_VERSION, sanitizePayazaRichHtml, wrapPlainTextAsParagraph, } from '../../../lib/rich-html.js';
+import { resolveFieldDensity } from './FieldDensityContext.js';
+function runCmd(cmd, val) {
+    document.execCommand(cmd, false, val);
+}
+const toolbarBtn = 'rounded px-2 py-0.5 text-[11px] text-[#1b0029] hover:bg-[#f6f7f7] transition-colors';
+/** Visual editor (WordPress-like): formatted text only — raw HTML tags are hidden. Prefer canvas inline edit for parity. */
+export const RichTextField = memo(({ label, value, onChange, placeholder, multiline, density: densityProp }) => {
+    const density = resolveFieldDensity(densityProp);
+    const compact = density === 'compact';
+    const hostRef = useRef(null);
+    const focusedRef = useRef(false);
+    const [, setTick] = useState(0);
+    const seedHtml = coerceRichSidebarEditorString(value);
+    useLayoutEffect(() => {
+        const el = hostRef.current;
+        if (!el || focusedRef.current)
+            return;
+        el.innerHTML = seedHtml || '';
+    }, [seedHtml, value]);
+    const flush = useCallback(() => {
+        const el = hostRef.current;
+        const inner = el?.innerHTML ?? '';
+        const next = buildPayazaRichCommitFromEditorHtml(inner, { keepRaw: false });
+        onChange(next);
+    }, [onChange]);
+    const onPaste = useCallback((e) => {
+        e.preventDefault();
+        const html = e.clipboardData?.getData('text/html');
+        const plain = e.clipboardData?.getData('text/plain') ?? '';
+        if (html?.trim()) {
+            document.execCommand('insertHTML', false, sanitizePayazaRichHtml(html));
+        }
+        else {
+            document.execCommand('insertHTML', false, wrapPlainTextAsParagraph(plain));
+        }
+        setTick((n) => n + 1);
+    }, []);
+    const execWrap = useCallback((fn) => {
+        hostRef.current?.focus();
+        fn();
+        setTick((n) => n + 1);
+    }, []);
+    const onBold = () => execWrap(() => runCmd('bold'));
+    const onItalic = () => execWrap(() => runCmd('italic'));
+    const onUnderline = () => execWrap(() => runCmd('underline'));
+    const onLink = () => execWrap(() => {
+        const urlRaw = typeof window !== 'undefined' ? window.prompt('Link URL', 'https://') : '';
+        const safe = coercePayazaRichLinkHref(urlRaw ?? '');
+        if (!safe)
+            return;
+        document.execCommand('createLink', false, safe);
+    });
+    const onBullets = () => execWrap(() => runCmd('insertUnorderedList'));
+    const onOrdered = () => execWrap(() => runCmd('insertOrderedList'));
+    const onClear = () => execWrap(() => {
+        runCmd('removeFormat');
+        runCmd('unlink');
+    });
+    const normalized = normalizeStoredRichValue(value);
+    const hint = normalized && normalized.policyVersion !== PAYAZA_RICH_HTML_POLICY_VERSION
+        ? `Prior policy ${String(normalized.policyVersion)} — normalized to v${PAYAZA_RICH_HTML_POLICY_VERSION} on blur`
+        : 'Use the toolbar for bold, lists, and links. Formatting is cleaned automatically (no custom HTML).';
+    const ph = placeholder || `Add ${label}…`;
+    const minH = multiline ? (compact ? 88 : 140) : compact ? 52 : 72;
+    const toolbar = (_jsxs("div", { className: compact
+            ? 'flex flex-wrap gap-0.5 border-b border-[#eaeaea] bg-[#fafafa]/80 px-2 py-1'
+            : 'flex flex-wrap gap-1 rounded-md border border-[#dcdcde] bg-[#fafafa] px-1.5 py-1 shadow-[0_1px_2px_rgba(27,0,41,0.04)]', children: [_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: onBold, className: `${toolbarBtn} font-bold`, children: "B" }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: onItalic, className: `${toolbarBtn} italic`, children: "I" }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: onUnderline, className: `${toolbarBtn} underline`, children: "U" }), _jsx("span", { className: "mx-0.5 w-px shrink-0 self-stretch bg-[#dcdcde]", "aria-hidden": true }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: onLink, className: `${toolbarBtn} text-[10px] font-semibold uppercase tracking-wide text-[#440066]`, children: "Link" }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: onBullets, className: toolbarBtn, children: "\u2022 List" }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: onOrdered, className: toolbarBtn, children: "1. List" }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: onClear, className: `${toolbarBtn} text-[10px] text-[#787c82]`, children: "Clear" })] }));
+    return (_jsxs("div", { className: `flex flex-col group/field ${compact ? 'gap-1.5' : 'gap-2.5'}`, children: [_jsx("style", { children: `
+          .payaza-sidebar-rich-ed:empty:before {
+            content: attr(data-placeholder);
+            color: rgb(27 0 41 / 0.35);
+            pointer-events: none;
+          }
+        ` }), _jsxs("div", { className: "flex items-center justify-between px-0.5", children: [_jsx("label", { className: `font-semibold uppercase tracking-[0.06em] transition-colors group-focus-within/field:text-[#1b0029]/70 ${compact ? 'text-[10px] text-[#1b0029]/40' : 'text-[11px] text-[#1b0029]/45'}`, children: label }), _jsx("span", { className: "sr-only", children: ph })] }), compact ? (_jsxs("div", { className: "overflow-hidden rounded-md border border-[#dcdcde] bg-white shadow-[0_1px_2px_rgba(27,0,41,0.03)] focus-within:border-[#440066]/45 focus-within:ring-1 focus-within:ring-[#440066]/25", children: [toolbar, _jsx("div", { ref: hostRef, role: "textbox", "aria-multiline": multiline !== false, "aria-label": label, "data-placeholder": ph, contentEditable: true, suppressContentEditableWarning: true, spellCheck: true, style: { minHeight: minH }, onFocus: () => {
+                            focusedRef.current = true;
+                        }, onBlur: () => {
+                            focusedRef.current = false;
+                            flush();
+                        }, onInput: flush, onPaste: onPaste, className: "payaza-sidebar-rich-ed w-full px-3 py-2 text-[13px] font-medium leading-relaxed text-[#1b0029] focus:outline-none" })] })) : (_jsxs(_Fragment, { children: [toolbar, _jsx("div", { ref: hostRef, role: "textbox", "aria-multiline": multiline !== false, "aria-label": label, "data-placeholder": ph, contentEditable: true, suppressContentEditableWarning: true, spellCheck: true, style: { minHeight: minH }, onFocus: () => {
+                            focusedRef.current = true;
+                        }, onBlur: () => {
+                            focusedRef.current = false;
+                            flush();
+                        }, onInput: flush, onPaste: onPaste, className: "payaza-sidebar-rich-ed w-full rounded-md border border-[#dcdcde] bg-white px-3.5 py-2.5 text-[13px] font-medium leading-relaxed text-[#1b0029] shadow-[0_1px_2px_rgba(27,0,41,0.04)] transition-colors focus:border-[#440066] focus:outline-none focus:ring-1 focus:ring-[#440066]/35" }), _jsx("p", { className: "px-0.5 text-[10px] leading-relaxed text-[#787c82]", children: hint })] }))] }));
+});

package/dist/editor/payaza-form/components/SectionField.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface SectionFieldProps {
+    label: string;
+    description?: string;
+    children: React.ReactNode;
+    /** @deprecated Sections are always expanded; kept for callsite compatibility. */
+    defaultExpanded?: boolean;
+}
+/**
+ * Non-collapsible panel for block/schema groups — full settings always visible.
+ */
+export declare const SectionField: React.FC<SectionFieldProps>;
+export {};
+//# sourceMappingURL=SectionField.d.ts.map

package/dist/editor/payaza-form/components/SectionField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/SectionField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iFAAiF;IACjF,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoBpD,CAAC"}

package/dist/editor/payaza-form/components/SectionField.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils/index.js';
+/**
+ * Non-collapsible panel for block/schema groups — full settings always visible.
+ */
+export const SectionField = ({ label, description, children }) => {
+    return (_jsxs("div", { className: cn('rounded-lg border border-black/[0.06] bg-white shadow-[0_2px_8px_rgba(27,0,41,0.06)] transition-shadow'), children: [_jsxs("div", { className: "border-b border-black/[0.06] px-3 py-3 md:px-3.5", children: [_jsx("span", { className: "block text-[11px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]", children: label }), description ? (_jsx("p", { className: "mt-1 text-[12px] font-normal leading-snug text-[#1b0029]/50", children: description })) : null] }), _jsx("div", { className: "bg-[#fafafa]/80 px-3 py-4 md:px-4", children: _jsx("div", { className: "space-y-6", children: children }) })] }));
+};

package/dist/editor/payaza-form/components/SectionSchemaInspector.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface SectionSchemaInspectorProps {
+    sectionKey: string;
+    /** The schema node for this section (type:'section' with .fields, or a flat schema map). */
+    sectionSchema: Record<string, any>;
+    /** Current data values for this section. */
+    sectionData: Record<string, any> | undefined;
+    /** Called with (sectionKey, fieldPath, value) on any field change. */
+    onFieldChange: (sectionKey: string, fieldPath: string[], value: any) => void;
+}
+/**
+ * Renders the full set of editable fields for a selected section using FieldRenderer.
+ * This powers the Settings tab when no granular canvas element is focused, giving
+ * every template the same sidebar editing capability as clothing-minimal.
+ */
+export declare const SectionSchemaInspector: React.FC<SectionSchemaInspectorProps>;
+export {};
+//# sourceMappingURL=SectionSchemaInspector.d.ts.map

package/dist/editor/payaza-form/components/SectionSchemaInspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionSchemaInspector.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/SectionSchemaInspector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,2BAA2B;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC;IAC7C,sEAAsE;IACtE,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9E;AAQD;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAmGxE,CAAC"}

package/dist/editor/payaza-form/components/SectionSchemaInspector.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldRenderer } from '../FieldRenderer.js';
+import { BlocksField } from './BlocksField.js';
+import { PAYAZA_BLOCK_IDS } from '../../blocks/types.js';
+function fieldTypeOf(field) {
+    const raw = field.type ?? field._editor;
+    if (raw === undefined || raw === null)
+        return '';
+    return typeof raw === 'string' ? raw.trim().toLowerCase() : String(raw).trim().toLowerCase();
+}
+/**
+ * Renders the full set of editable fields for a selected section using FieldRenderer.
+ * This powers the Settings tab when no granular canvas element is focused, giving
+ * every template the same sidebar editing capability as clothing-minimal.
+ */
+export const SectionSchemaInspector = ({ sectionKey, sectionSchema, sectionData, onFieldChange, }) => {
+    const rawType = sectionSchema?.type ?? sectionSchema?._editor;
+    const isSectionNode = typeof rawType === 'string' && rawType.trim().toLowerCase() === 'section';
+    const fields = isSectionNode && sectionSchema.fields
+        ? sectionSchema.fields
+        : sectionSchema;
+    const fieldEntries = Object.entries(fields).filter(([key, field]) => {
+        if (key.startsWith('_') ||
+            key === 'type' ||
+            key === 'label' ||
+            key === 'fields' ||
+            key === 'description' ||
+            key === 'itemSchema')
+            return false;
+        if (!field || typeof field !== 'object')
+            return false;
+        const t = field.type ?? field._editor;
+        if (!t && typeof field.defaultValue !== 'boolean')
+            return false;
+        return true;
+    });
+    if (fieldEntries.length === 0) {
+        return (_jsx("div", { className: "flex flex-col items-center justify-center px-5 py-10 text-center", children: _jsx("p", { className: "text-[12px] text-[#787c82]", children: "No configurable fields for this section." }) }));
+    }
+    const handleChange = (fieldKey, value, fieldPath) => {
+        if (!fieldPath || fieldPath.length === 0) {
+            onFieldChange(sectionKey, [fieldKey], value);
+        }
+        else if (fieldPath[0] === fieldKey) {
+            onFieldChange(sectionKey, fieldPath, value);
+        }
+        else {
+            onFieldChange(sectionKey, [fieldKey, ...fieldPath], value);
+        }
+    };
+    return (_jsx("div", { className: "divide-y divide-[#f0f0f1]", children: fieldEntries.map(([fieldKey, fieldSchema]) => {
+            const ft = fieldTypeOf(fieldSchema);
+            const isBlocks = ft === 'blocks';
+            if (isBlocks) {
+                const blocksLabel = fieldSchema.label || fieldSchema._label || '';
+                const blocksDescription = fieldSchema.description || fieldSchema._description;
+                const allowed = Array.isArray(fieldSchema.allowedBlockNames)
+                    ? fieldSchema.allowedBlockNames
+                    : undefined;
+                return (_jsxs("div", { className: "py-3", children: [_jsxs("div", { className: "px-0 pb-2", children: [blocksLabel ? (_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]/75", children: blocksLabel })) : null, blocksDescription ? (_jsx("p", { className: "mt-0.5 text-[11px] text-[#646970]", children: blocksDescription })) : null] }), _jsx(BlocksField, { label: "", description: undefined, hideHeader: true, fullBleed: true, value: sectionData?.[fieldKey], pathPrefix: [fieldKey], allowedBlockNames: allowed ?? [...PAYAZA_BLOCK_IDS], onChange: (next) => handleChange(fieldKey, next, [fieldKey]) })] }, fieldKey));
+            }
+            return (_jsx("div", { className: "px-0 py-3", children: _jsx(FieldRenderer, { schemaField: fieldSchema, value: sectionData?.[fieldKey], path: [fieldKey], sectionKey: sectionKey, onChange: (value, fieldPath) => handleChange(fieldKey, value, fieldPath) }) }, fieldKey));
+        }) }));
+};

package/dist/editor/payaza-form/components/SegmentedControlField.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface SegmentedControlFieldProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: Array<{
+        label: string;
+        value: string;
+    }>;
+}
+export declare const SegmentedControlField: React.FC<SegmentedControlFieldProps>;
+export {};
+//# sourceMappingURL=SegmentedControlField.d.ts.map

package/dist/editor/payaza-form/components/SegmentedControlField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/SegmentedControlField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,0BAA0B;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAgCtE,CAAC"}

package/dist/editor/payaza-form/components/SegmentedControlField.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+export const SegmentedControlField = ({ label, value, onChange, options, }) => {
+    return (_jsxs("div", { className: "group", children: [_jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [_jsx(Check, { className: "w-3.5 h-3.5 text-slate-400" }), _jsx("label", { className: "text-[11px] font-bold text-slate-600 uppercase tracking-wide", children: label })] }), _jsx("div", { className: "flex gap-1 bg-slate-50 p-1 rounded-md", children: options.map((option) => (_jsx("button", { type: "button", onClick: () => onChange(option.value), className: `flex-1 px-3 py-1.5 rounded text-[11px] font-medium transition-all ${value === option.value
+                        ? 'bg-blue-500 text-white shadow-sm'
+                        : 'text-slate-600 hover:text-slate-900'}`, children: option.label }, option.value))) })] }));
+};

package/dist/editor/payaza-form/components/StarRatingField.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type FieldDensity } from './FieldDensityContext';
+interface StarRatingFieldProps {
+    label: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    density?: FieldDensity;
+}
+export declare const StarRatingField: React.FC<StarRatingFieldProps>;
+export {};
+//# sourceMappingURL=StarRatingField.d.ts.map

package/dist/editor/payaza-form/components/StarRatingField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StarRatingField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/StarRatingField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE/E,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAOD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6C1D,CAAC"}

package/dist/editor/payaza-form/components/StarRatingField.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Star } from 'lucide-react';
+import { cn } from '../../../lib/utils/index.js';
+import { resolveFieldDensity } from './FieldDensityContext.js';
+function clampRating(value, min, max) {
+    if (!Number.isFinite(value))
+        return max;
+    return Math.min(max, Math.max(min, Math.round(value)));
+}
+export const StarRatingField = ({ label, value, onChange, min = 1, max = 5, density: densityProp, }) => {
+    const density = resolveFieldDensity(densityProp);
+    const compact = density === 'compact';
+    const rating = clampRating(value, min, max);
+    const stars = Array.from({ length: max - min + 1 }, (_, i) => min + i);
+    return (_jsxs("div", { className: `group/field flex flex-col ${compact ? 'gap-1.5' : 'gap-2.5'}`, children: [_jsx("label", { className: `px-0.5 font-semibold uppercase tracking-[0.06em] text-[#1b0029]/45 transition-colors group-focus-within/field:text-[#1b0029]/70 ${compact ? 'text-[10px]' : 'text-[11px]'}`, children: label }), _jsxs("div", { className: "flex items-center gap-1", children: [stars.map((starValue) => (_jsx("button", { type: "button", "aria-label": `${starValue} star${starValue === 1 ? '' : 's'}`, className: "rounded p-0.5 transition-transform hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#440066]/30", onClick: () => onChange(starValue), children: _jsx(Star, { className: cn(compact ? 'h-4 w-4' : 'h-5 w-5', starValue <= rating ? 'fill-amber-400 text-amber-400' : 'text-[#1b0029]/20') }) }, starValue))), _jsxs("span", { className: `ml-2 font-medium text-[#1b0029]/60 ${compact ? 'text-[11px]' : 'text-xs'}`, children: [rating, "/", max] })] })] }));
+};

package/dist/editor/payaza-form/components/TextField.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type FieldDensity } from './FieldDensityContext';
+interface TextFieldProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    type?: string;
+    density?: FieldDensity;
+}
+export declare const TextField: React.FC<TextFieldProps>;
+export {};
+//# sourceMappingURL=TextField.d.ts.map

package/dist/editor/payaza-form/components/TextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE/E,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiE7C,CAAC"}

package/dist/editor/payaza-form/components/TextField.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { resolveFieldDensity } from './FieldDensityContext.js';
+export const TextField = memo(({ label, value, onChange, placeholder, type = 'text', density: densityProp, }) => {
+    const density = resolveFieldDensity(densityProp);
+    const compact = density === 'compact';
+    const charCount = (value || '').length;
+    const isColor = type === 'color';
+    return (_jsxs("div", { className: `flex flex-col group/field ${compact ? 'gap-1.5' : 'gap-2.5'}`, children: [_jsxs("div", { className: "flex items-center justify-between px-0.5", children: [_jsx("label", { className: `font-semibold uppercase tracking-[0.06em] transition-colors group-focus-within/field:text-[#1b0029]/70 ${compact ? 'text-[10px] text-[#1b0029]/40' : 'text-[11px] text-[#1b0029]/45'}`, children: label }), charCount > 0 && !isColor && !compact && (_jsx("div", { className: "flex items-center gap-1.5 px-2 py-0.5 bg-slate-50 border border-slate-100 rounded-full", children: _jsx("span", { className: "text-[9px] font-black text-slate-400 tabular-nums uppercase tracking-widest", children: charCount }) })), isColor && !compact && (_jsx("div", { className: "flex items-center gap-1.5 px-2 py-0.5 bg-slate-50 border border-slate-100 rounded-full", children: _jsx("span", { className: "text-[9px] font-black text-slate-400 tabular-nums uppercase tracking-widest", children: "HEX" }) }))] }), _jsxs("div", { className: "relative group/container flex items-center", children: [isColor && (_jsx("div", { className: "absolute left-3 z-10", children: _jsx("div", { className: "relative w-6 h-6 rounded-lg border border-white/50 shadow-sm overflow-hidden group-hover/container:scale-110 transition-transform duration-300", children: _jsx("input", { type: "color", className: "absolute inset-[-10px] w-[200%] h-[200%] cursor-pointer border-none p-0", value: value || '#000000', onChange: (e) => onChange(e.target.value) }) }) })), _jsx("input", { type: "text", className: `w-full rounded-md border border-black/[0.1] bg-white text-[13px] font-medium text-[#1b0029] placeholder:text-[#1b0029]/35 transition-colors focus:border-[#440066]/45 focus:outline-none focus:ring-2 focus:ring-[#440066]/15 group-hover/container:border-black/[0.14] ${compact
+                            ? 'h-10 shadow-none px-3'
+                            : 'h-11 shadow-[0_1px_2px_rgba(27,0,41,0.04)] px-3.5'} ${isColor ? 'pl-12 pr-4' : ''}`, value: value || '', placeholder: placeholder || (isColor ? '#000000' : `Type ${label.toLowerCase()}...`), onChange: (e) => onChange(e.target.value) })] })] }));
+});

package/dist/editor/payaza-form/components/TextareaField.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface TextareaFieldProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    rows?: number;
+}
+export declare const TextareaField: React.FC<TextareaFieldProps>;
+export {};
+//# sourceMappingURL=TextareaField.d.ts.map

package/dist/editor/payaza-form/components/TextareaField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/TextareaField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkCrD,CAAC"}

package/dist/editor/payaza-form/components/TextareaField.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+export const TextareaField = memo(({ label, value, onChange, placeholder, rows = 4, }) => {
+    const charCount = (value || '').length;
+    return (_jsxs("div", { className: "flex flex-col gap-2.5 group/field", children: [_jsxs("div", { className: "flex items-center justify-between px-0.5", children: [_jsx("label", { className: "text-[11px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]/45 transition-colors group-focus-within/field:text-[#1b0029]/70", children: label }), charCount > 0 && (_jsx("div", { className: "flex items-center gap-1.5 px-2 py-0.5 bg-slate-50 border border-slate-100 rounded-full", children: _jsx("span", { className: "text-[9px] font-black text-slate-400 tabular-nums uppercase tracking-widest", children: charCount }) }))] }), _jsx("div", { className: "relative group/container", children: _jsx("textarea", { rows: rows, className: "min-h-[140px] w-full resize-none rounded-md border border-black/[0.1] bg-white px-3.5 py-3 text-[13px] font-medium leading-relaxed text-[#1b0029] shadow-[0_1px_2px_rgba(27,0,41,0.04)] transition-colors placeholder:text-[#1b0029]/35 focus:border-[#440066]/45 focus:outline-none focus:ring-2 focus:ring-[#440066]/15 group-hover/container:border-black/[0.14]", value: value || '', placeholder: placeholder || `Describe ${label.toLowerCase()}...`, onChange: (e) => onChange(e.target.value) }) })] }));
+});

package/dist/editor/payaza-form/components/ToggleField.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ToggleFieldProps {
+    label: string;
+    value: boolean | string | null | undefined;
+    onChange: (value: boolean) => void;
+}
+/**
+ * Accessible switch bound to checkbox — avoids unreliable flex/Button rendering in nested inspectors.
+ */
+export declare const ToggleField: React.FC<ToggleFieldProps>;
+export {};
+//# sourceMappingURL=ToggleField.d.ts.map

package/dist/editor/payaza-form/components/ToggleField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/ToggleField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC;AAOD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqCjD,CAAC"}