@mohasinac/appkit 2.7.35 → 2.7.37

package/dist/ui/components/FormField.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from "./Input";
 import { Select } from "./Select";

package/dist/ui/components/RowActionMenu.js

@@ -1,19 +1,54 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { MoreHorizontal } from "lucide-react";
 import { Button } from "./Button";
 import { Span } from "./Typography";
-import { useClickOutside, useKeyPress } from "../../react";
+import { useKeyPress } from "../../react";
 export function RowActionMenu({ actions, align = "right", }) {
     const [open, setOpen] = useState(false);
-    const ref = useRef(null);
-    useClickOutside(ref, () => setOpen(false), { enabled: open });
+    const [pos, setPos] = useState(null);
+    const wrapperRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
     useKeyPress("Escape", () => setOpen(false), { enabled: open });
-    return (_jsxs("div", { ref: ref, className: "appkit-row-action-menu", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { type: "button", variant: "ghost", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen((v) => !v), className: "appkit-row-action-menu__trigger", children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1.5 }) }), open ? (_jsx("div", { role: "menu", className: `appkit-row-action-menu__dropdown ${align === "right" ? "appkit-row-action-menu__dropdown--right" : "appkit-row-action-menu__dropdown--left"}`, "data-section": "rowactionmenu-div-585", children: actions.map((action, idx) => (_jsxs("div", { "data-section": "rowactionmenu-div-586", children: [action.separator && idx > 0 ? (_jsx("div", { className: "appkit-row-action-menu__separator" })) : null, _jsxs(Button, { type: "button", role: "menuitem", variant: "ghost", disabled: action.disabled, onClick: () => {
-                                if (action.disabled)
-                                    return;
-                                action.onClick();
-                                setOpen(false);
-                            }, className: `appkit-row-action-menu__item ${action.destructive ? "appkit-row-action-menu__item--destructive" : ""} ${action.disabled ? "opacity-40 cursor-not-allowed" : ""}`, children: [action.icon ? (_jsx(Span, { className: "appkit-row-action-menu__icon", children: action.icon })) : null, action.label] })] }, `${action.label}-${idx}`))) })) : null] }));
+    // Close on outside click — exclude both trigger wrapper and portal dropdown
+    useEffect(() => {
+        if (!open)
+            return;
+        const handler = (e) => {
+            const t = e.target;
+            if (!wrapperRef.current?.contains(t) && !dropdownRef.current?.contains(t)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [open]);
+    const handleToggle = useCallback(() => {
+        if (!open && wrapperRef.current) {
+            const rect = wrapperRef.current.getBoundingClientRect();
+            const top = rect.bottom + 4;
+            setPos(align === "right"
+                ? { top, right: window.innerWidth - rect.right }
+                : { top, left: rect.left });
+        }
+        setOpen((v) => !v);
+    }, [open, align]);
+    const dropdown = open && pos && mounted
+        ? createPortal(_jsx("div", { ref: dropdownRef, role: "menu", className: "appkit-row-action-menu__dropdown", style: {
+                position: "fixed",
+                zIndex: "var(--appkit-z-modal)",
+                top: pos.top,
+                ...(pos.right !== undefined ? { right: pos.right } : { left: pos.left }),
+            }, onClick: (e) => e.stopPropagation(), children: actions.map((action, idx) => (_jsxs("div", { children: [action.separator && idx > 0 ? (_jsx("div", { className: "appkit-row-action-menu__separator" })) : null, _jsxs(Button, { type: "button", role: "menuitem", variant: "ghost", disabled: action.disabled, onClick: () => {
+                            if (action.disabled)
+                                return;
+                            action.onClick();
+                            setOpen(false);
+                        }, className: `appkit-row-action-menu__item ${action.destructive ? "appkit-row-action-menu__item--destructive" : ""} ${action.disabled ? "opacity-40 cursor-not-allowed" : ""}`, children: [action.icon ? (_jsx(Span, { className: "appkit-row-action-menu__icon", children: action.icon })) : null, action.label] })] }, `${action.label}-${idx}`))) }), document.body)
+        : null;
+    return (_jsxs("div", { ref: wrapperRef, className: "appkit-row-action-menu", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { type: "button", variant: "ghost", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": open, onClick: handleToggle, className: "appkit-row-action-menu__trigger", children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1.5 }) }), dropdown] }));
 }

package/dist/ui/components/SideDrawer.style.css

@@ -158,7 +158,7 @@
 .appkit-side-drawer__content {
   flex: 1;
   overflow-y: auto;
-  padding: 1rem;
+  padding: 1rem 1.25rem;
 }
 @media (min-width: 640px) {
   .appkit-side-drawer__content { padding: 1.5rem; }
@@ -167,7 +167,7 @@
 /* Footer */
 .appkit-side-drawer__footer {
   flex-shrink: 0;
-  padding: 1rem 1rem;
+  padding: 1rem 1.25rem;
   border-top: 1px solid var(--appkit-color-border);
   background-color: var(--appkit-color-bg);
 }

package/dist/ui/forms/FieldCheckbox.d.ts

@@ -0,0 +1,13 @@
+export interface FieldCheckboxProps {
+    name: string;
+    label: string;
+    hint?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    /** Override error — falls back to FormShell context error for this field */
+    error?: string;
+    className?: string;
+}
+export declare function FieldCheckbox({ name, label, hint, checked, onChange, onBlur, disabled, error: errorProp, className, }: FieldCheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/forms/FieldCheckbox.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormShellContext } from "./FormShell";
+import { Checkbox } from "../components/Checkbox";
+import { Text } from "../components/Typography";
+export function FieldCheckbox({ name, label, hint, checked, onChange, onBlur, disabled, error: errorProp, className, }) {
+    const ctx = useContext(FormShellContext);
+    const contextError = ctx?.errors[name];
+    const error = errorProp ?? contextError;
+    const touched = ctx?.touched[name];
+    const showError = !!error && (touched != null ? touched : true);
+    const inputId = `field-${name}`;
+    const errorId = `${inputId}-error`;
+    function handleChange(e) {
+        onChange?.(e.target.checked);
+        if (showError)
+            ctx?.clearFieldError(name);
+    }
+    function handleBlur() {
+        ctx?.setFieldTouched(name);
+        onBlur?.();
+    }
+    return (_jsxs("div", { className: ["appkit-form-field", className].filter(Boolean).join(" "), children: [_jsx(Checkbox, { id: inputId, name: name, checked: checked, onChange: handleChange, onBlur: handleBlur, label: label, disabled: disabled, error: showError ? error : undefined, "aria-describedby": showError ? errorId : undefined }), !showError && hint && (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: hint })), showError && (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error }))] }));
+}

package/dist/ui/forms/FieldInput.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface FieldInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    name: string;
+    label?: string;
+    hint?: string;
+    required?: boolean;
+    onChange?: (value: string) => void;
+    /** Override error — falls back to FormShell context error for this field */
+    error?: string;
+}
+export declare function FieldInput({ name, label, hint, required, onChange, error: errorProp, onBlur, className, ...inputProps }: FieldInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/forms/FieldInput.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormShellContext } from "./FormShell";
+import { Input } from "../components/Input";
+import { Label, Text, Span } from "../components/Typography";
+export function FieldInput({ name, label, hint, required, onChange, error: errorProp, onBlur, className, ...inputProps }) {
+    const ctx = useContext(FormShellContext);
+    const contextError = ctx?.errors[name];
+    const error = errorProp ?? contextError;
+    const touched = ctx?.touched[name];
+    const showError = !!error && (touched != null ? touched : true);
+    const inputId = `field-${name}`;
+    const errorId = `${inputId}-error`;
+    function handleBlur(e) {
+        ctx?.setFieldTouched(name);
+        onBlur?.(e);
+    }
+    function handleChange(e) {
+        onChange?.(e.target.value);
+        if (showError)
+            ctx?.clearFieldError(name);
+    }
+    return (_jsxs("div", { className: ["appkit-form-field", className].filter(Boolean).join(" "), children: [label && (_jsxs(Label, { htmlFor: inputId, className: "appkit-form-field__label", children: [label, required && _jsx(Span, { className: "appkit-form-field__required", children: " *" })] })), _jsx(Input, { id: inputId, name: name, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": showError ? errorId : undefined, onBlur: handleBlur, onChange: handleChange, ...inputProps }), !showError && hint && (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: hint })), showError && (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error }))] }));
+}

package/dist/ui/forms/FieldSelect.d.ts

@@ -0,0 +1,17 @@
+import { type SelectOption } from "../components/Select";
+export interface FieldSelectProps {
+    name: string;
+    label?: string;
+    hint?: string;
+    required?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    options: SelectOption[];
+    disabled?: boolean;
+    placeholder?: string;
+    /** Override error — falls back to FormShell context error for this field */
+    error?: string;
+    className?: string;
+}
+export declare function FieldSelect({ name, label, hint, required, value, onChange, onBlur, options, disabled, placeholder, error: errorProp, className, }: FieldSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/forms/FieldSelect.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormShellContext } from "./FormShell";
+import { Select } from "../components/Select";
+import { Label, Text, Span } from "../components/Typography";
+export function FieldSelect({ name, label, hint, required, value, onChange, onBlur, options, disabled, placeholder, error: errorProp, className, }) {
+    const ctx = useContext(FormShellContext);
+    const contextError = ctx?.errors[name];
+    const error = errorProp ?? contextError;
+    const touched = ctx?.touched[name];
+    const showError = !!error && (touched != null ? touched : true);
+    const inputId = `field-${name}`;
+    const errorId = `${inputId}-error`;
+    function handleBlur() {
+        ctx?.setFieldTouched(name);
+        onBlur?.();
+    }
+    function handleChange(e) {
+        onChange?.(e.target.value);
+        if (showError)
+            ctx?.clearFieldError(name);
+    }
+    return (_jsxs("div", { className: ["appkit-form-field", className].filter(Boolean).join(" "), children: [label && (_jsxs(Label, { htmlFor: inputId, className: "appkit-form-field__label", children: [label, required && _jsx(Span, { className: "appkit-form-field__required", children: " *" })] })), _jsx(Select, { id: inputId, name: name, value: value, onChange: handleChange, onBlur: handleBlur, options: options, disabled: disabled, placeholder: placeholder, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": showError ? errorId : undefined }), !showError && hint && (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: hint })), showError && (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error }))] }));
+}

package/dist/ui/forms/FormShell.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+export interface FormShellStep {
+    id: string;
+    label: string;
+    /** Field names required in this step — drives publish gate + error badge */
+    requiredFields?: string[];
+    content: React.ReactNode;
+}
+export interface FormShellContextValue {
+    errors: Record<string, string>;
+    touched: Record<string, boolean>;
+    setFieldError: (name: string, error: string | null) => void;
+    setFieldTouched: (name: string) => void;
+    clearFieldError: (name: string) => void;
+    steps: FormShellStep[];
+    currentStep: number;
+    goToStep: (n: number) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    isPublishReady: boolean;
+    isDirty: boolean;
+    isSubmitting: boolean;
+    stepErrorCounts: number[];
+}
+export interface FormShellProps {
+    steps: FormShellStep[];
+    /** Called on debounced auto-save and "Save Draft" click */
+    onSaveDraft?: (values: Record<string, unknown>) => Promise<{
+        id?: string;
+    } | void>;
+    /** Called on Publish / Save */
+    onPublish: (values: Record<string, unknown>) => Promise<void>;
+    /** Current form values — caller owns state */
+    values: Record<string, unknown>;
+    /** Whether any values differ from the persisted state */
+    isDirty?: boolean;
+    draftId?: string;
+    autoSaveDelayMs?: number;
+    publishLabel?: string;
+    saveDraftLabel?: string;
+    title?: string;
+    className?: string;
+    /** If true, show steps as vertical accordion on mobile instead of wizard tabs */
+    mobileAccordion?: boolean;
+}
+export declare const FormShellContext: React.Context<FormShellContextValue | null>;
+export declare function useFormShell(): FormShellContextValue;
+export declare function FormShell({ steps, onSaveDraft, onPublish, values, isDirty, autoSaveDelayMs, publishLabel, saveDraftLabel, title, className, mobileAccordion, }: FormShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/forms/FormShell.js

@@ -0,0 +1,176 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { Button } from "../components/Button";
+import { Heading, Text } from "../components/Typography";
+// ─── Context ──────────────────────────────────────────────────────────────────
+export const FormShellContext = createContext(null);
+export function useFormShell() {
+    const ctx = useContext(FormShellContext);
+    if (!ctx)
+        throw new Error("useFormShell must be used inside <FormShell>");
+    return ctx;
+}
+function StepIndicator({ steps, currentStep, stepErrorCounts, onGoTo, }) {
+    return (_jsx("nav", { className: "appkit-formshell__step-indicator", "aria-label": "Form steps", children: steps.map((step, i) => {
+            const isActive = i === currentStep;
+            const hasErrors = stepErrorCounts[i] > 0;
+            return (_jsxs("button", { type: "button", className: [
+                    "appkit-formshell__step-btn",
+                    isActive ? "appkit-formshell__step-btn--active" : "",
+                    hasErrors ? "appkit-formshell__step-btn--error" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" "), onClick: () => onGoTo(i), "aria-current": isActive ? "step" : undefined, "aria-label": `${step.label}${hasErrors ? ` (${stepErrorCounts[i]} error${stepErrorCounts[i] !== 1 ? "s" : ""})` : ""}`, children: [_jsxs("span", { className: "appkit-formshell__step-dot", children: [hasErrors && (_jsx("span", { className: "appkit-formshell__step-error-badge", "aria-hidden": "true" })), _jsx("span", { className: "appkit-formshell__step-num", children: i + 1 })] }), _jsx("span", { className: "appkit-formshell__step-label", children: step.label })] }, step.id));
+        }) }));
+}
+function ErrorSummary({ errors, visible }) {
+    const entries = Object.entries(errors).filter(([, v]) => v);
+    if (!visible || entries.length === 0)
+        return null;
+    return (_jsxs("div", { className: "appkit-formshell__error-summary", role: "alert", "aria-live": "assertive", children: [_jsxs(Text, { size: "sm", variant: "error", className: "appkit-formshell__error-summary__title", children: ["Please fix ", entries.length, " error", entries.length !== 1 ? "s" : "", " before publishing."] }), _jsx("ul", { className: "appkit-formshell__error-summary__list", children: entries.map(([field, msg]) => (_jsx("li", { children: _jsxs(Text, { size: "sm", variant: "error", children: [_jsx("strong", { children: field }), ": ", msg] }) }, field))) })] }));
+}
+// ─── FormShell ────────────────────────────────────────────────────────────────
+export function FormShell({ steps, onSaveDraft, onPublish, values, isDirty = false, autoSaveDelayMs = 2000, publishLabel = "Publish", saveDraftLabel = "Save Draft", title, className = "", mobileAccordion = true, }) {
+    const [errors, setErrors] = useState({});
+    const [touched, setTouched] = useState({});
+    const [currentStep, setCurrentStep] = useState(0);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [showErrorSummary, setShowErrorSummary] = useState(false);
+    // Auto-save
+    const autoSaveTimer = useRef(null);
+    const valuesRef = useRef(values);
+    valuesRef.current = values;
+    useEffect(() => {
+        if (!onSaveDraft || !isDirty)
+            return;
+        if (autoSaveTimer.current)
+            clearTimeout(autoSaveTimer.current);
+        autoSaveTimer.current = setTimeout(() => {
+            onSaveDraft(valuesRef.current).catch(() => { });
+        }, autoSaveDelayMs);
+        return () => {
+            if (autoSaveTimer.current)
+                clearTimeout(autoSaveTimer.current);
+        };
+    }, [values, isDirty, onSaveDraft, autoSaveDelayMs]);
+    // Per-step error counts
+    const stepErrorCounts = useMemo(() => {
+        return steps.map((step) => {
+            const fields = step.requiredFields ?? [];
+            return fields.filter((f) => errors[f]).length;
+        });
+    }, [steps, errors]);
+    // Publish gate: all required fields across all steps must be valid
+    const isPublishReady = useMemo(() => {
+        return steps.every((step) => (step.requiredFields ?? []).every((f) => !errors[f]));
+    }, [steps, errors]);
+    const setFieldError = useCallback((name, error) => {
+        setErrors((prev) => {
+            if (!error) {
+                const next = { ...prev };
+                delete next[name];
+                return next;
+            }
+            if (prev[name] === error)
+                return prev;
+            return { ...prev, [name]: error };
+        });
+    }, []);
+    const clearFieldError = useCallback((name) => {
+        setErrors((prev) => {
+            if (!prev[name])
+                return prev;
+            const next = { ...prev };
+            delete next[name];
+            return next;
+        });
+    }, []);
+    const setFieldTouched = useCallback((name) => {
+        setTouched((prev) => (prev[name] ? prev : { ...prev, [name]: true }));
+    }, []);
+    const goToStep = useCallback((n) => {
+        if (n >= 0 && n < steps.length)
+            setCurrentStep(n);
+    }, [steps.length]);
+    const nextStep = useCallback(() => setCurrentStep((s) => Math.min(s + 1, steps.length - 1)), [steps.length]);
+    const prevStep = useCallback(() => setCurrentStep((s) => Math.max(s - 1, 0)), []);
+    const handleSaveDraft = useCallback(async () => {
+        if (!onSaveDraft)
+            return;
+        setIsSubmitting(true);
+        try {
+            await onSaveDraft(values);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }, [onSaveDraft, values]);
+    const handlePublish = useCallback(async () => {
+        setShowErrorSummary(true);
+        if (!isPublishReady)
+            return;
+        setIsSubmitting(true);
+        try {
+            await onPublish(values);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }, [isPublishReady, onPublish, values]);
+    const ctx = useMemo(() => ({
+        errors,
+        touched,
+        setFieldError,
+        setFieldTouched,
+        clearFieldError,
+        steps,
+        currentStep,
+        goToStep,
+        nextStep,
+        prevStep,
+        isPublishReady,
+        isDirty,
+        isSubmitting,
+        stepErrorCounts,
+    }), [
+        errors,
+        touched,
+        setFieldError,
+        setFieldTouched,
+        clearFieldError,
+        steps,
+        currentStep,
+        goToStep,
+        nextStep,
+        prevStep,
+        isPublishReady,
+        isDirty,
+        isSubmitting,
+        stepErrorCounts,
+    ]);
+    const isMultiStep = steps.length > 1;
+    return (_jsx(FormShellContext.Provider, { value: ctx, children: _jsxs("div", { className: [
+                "appkit-formshell",
+                mobileAccordion ? "appkit-formshell--accordion-mobile" : "",
+                className,
+            ]
+                .filter(Boolean)
+                .join(" "), children: [(title || isMultiStep) && (_jsxs("div", { className: "appkit-formshell__header", children: [title && (_jsx(Heading, { level: 2, className: "appkit-formshell__title", children: title })), isMultiStep && (_jsx(StepIndicator, { steps: steps, currentStep: currentStep, stepErrorCounts: stepErrorCounts, onGoTo: goToStep }))] })), _jsx(ErrorSummary, { errors: errors, visible: showErrorSummary }), _jsx("div", { className: "appkit-formshell__body", children: isMultiStep ? (mobileAccordion ? (
+                    // Mobile: vertical accordion; Desktop: show only current step
+                    _jsx("div", { className: "appkit-formshell__steps", children: steps.map((step, i) => {
+                            const isActive = i === currentStep;
+                            const hasErrors = stepErrorCounts[i] > 0;
+                            return (_jsxs("div", { className: [
+                                    "appkit-formshell__step",
+                                    isActive ? "appkit-formshell__step--active" : "",
+                                    hasErrors ? "appkit-formshell__step--error" : "",
+                                ]
+                                    .filter(Boolean)
+                                    .join(" "), children: [_jsxs("button", { type: "button", className: "appkit-formshell__step-accordion-btn", onClick: () => goToStep(i), "aria-expanded": isActive, children: [_jsxs("span", { className: "appkit-formshell__step-accordion-label", children: [i + 1, ". ", step.label] }), hasErrors && (_jsx("span", { className: "appkit-formshell__step-error-badge appkit-formshell__step-error-badge--inline", children: stepErrorCounts[i] }))] }), _jsx("div", { className: "appkit-formshell__step-content", hidden: !isActive, "aria-hidden": !isActive, children: step.content })] }, step.id));
+                        }) })) : (
+                    // Non-accordion: show only the active step
+                    _jsx("div", { className: "appkit-formshell__step-content", children: steps[currentStep]?.content }))) : (
+                    // Single step: render content directly
+                    _jsx("div", { className: "appkit-formshell__step-content", children: steps[0]?.content })) }), _jsxs("div", { className: "appkit-formshell__footer", children: [isMultiStep && (_jsxs("div", { className: "appkit-formshell__step-nav", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: prevStep, disabled: currentStep === 0 || isSubmitting, children: "Previous" }), currentStep < steps.length - 1 && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: nextStep, disabled: isSubmitting, children: "Next" }))] })), _jsxs("div", { className: "appkit-formshell__actions", children: [onSaveDraft && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleSaveDraft, isLoading: isSubmitting, disabled: isSubmitting, children: saveDraftLabel })), _jsx(Button, { type: "button", size: "sm", onClick: handlePublish, isLoading: isSubmitting, disabled: isSubmitting || (showErrorSummary && !isPublishReady), children: publishLabel })] })] })] }) }));
+}