@mohasinac/appkit 2.7.45 → 2.7.47

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

@@ -68,6 +68,19 @@
   .appkit-drawer__panel--md { width: 24rem; }
 }
 
+/* FilterDrawer responsive size: full-width (lg) on mobile, fixed md-width on desktop */
+.appkit-drawer__panel--filter {
+  width: 100%;
+  max-width: 30rem;
+}
+
+@media (min-width: 1024px) {
+  .appkit-drawer__panel--filter {
+    width: 24rem;
+    max-width: none;
+  }
+}
+
 .appkit-drawer__drag-wrap {
   display: flex;
   justify-content: center;

package/dist/ui/components/FilterDrawer.d.ts

@@ -12,7 +12,9 @@ export interface FilterDrawerProps {
     triggerLabel?: string;
     triggerClassName?: string;
     hideTrigger?: boolean;
-    /** Which side the drawer slides in from. Default: "bottom" (slides up, mobile-first). */
+    /** Which side the drawer slides in from. Default: "right". */
     side?: "left" | "right" | "bottom";
+    /** Width for left/right drawers. Default: "md" (responsive: full-width on mobile, 24rem on desktop). */
+    size?: "sm" | "md" | "lg" | "full";
 }
-export declare function FilterDrawer({ children, title, open, onOpen, onClose, onApply, onReset, activeCount, pendingCount, triggerLabel, triggerClassName, hideTrigger, side, }: FilterDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterDrawer({ children, title, open, onOpen, onClose, onApply, onReset, activeCount, pendingCount, triggerLabel, triggerClassName, hideTrigger, side, size, }: FilterDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/FilterDrawer.js

@@ -4,7 +4,7 @@ import React from "react";
 import { Button } from "./Button";
 import { Drawer } from "./Drawer";
 import { Span } from "./Typography";
-export function FilterDrawer({ children, title = "Filters", open, onOpen, onClose, onApply, onReset, activeCount = 0, pendingCount, triggerLabel = "Filters", triggerClassName = "", hideTrigger = false, side = "bottom", }) {
+export function FilterDrawer({ children, title = "Filters", open, onOpen, onClose, onApply, onReset, activeCount = 0, pendingCount, triggerLabel = "Filters", triggerClassName = "", hideTrigger = false, side = "right", size = "md", }) {
     const [internalOpen, setInternalOpen] = React.useState(false);
     const isControlled = open !== undefined;
     const isOpen = isControlled ? open : internalOpen;
@@ -33,7 +33,7 @@ export function FilterDrawer({ children, title = "Filters", open, onOpen, onClos
                         handleOpen();
                 }, className: ["appkit-filter-drawer__trigger", triggerClassName]
                     .filter(Boolean)
-                    .join(" "), "aria-label": triggerLabel, children: [_jsx(Span, { children: triggerLabel }), activeCount > 0 ? (_jsx(Span, { className: "appkit-filter-drawer__badge", children: activeCount })) : null] })) : null, _jsx(Drawer, { isOpen: isOpen, onClose: handleClose, title: title, side: side, footer: _jsxs("div", { className: "appkit-filter-drawer__footer", "data-section": "filterdrawer-div-494", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onReset, children: "Reset all" }), _jsx(Button, { type: "button", variant: "primary", onClick: handleApply, children: pendingCount != null && pendingCount > 0
+                    .join(" "), "aria-label": triggerLabel, children: [_jsx(Span, { children: triggerLabel }), activeCount > 0 ? (_jsx(Span, { className: "appkit-filter-drawer__badge", children: activeCount })) : null] })) : null, _jsx(Drawer, { isOpen: isOpen, onClose: handleClose, title: title, side: side, size: size, className: "appkit-drawer__panel--filter", footer: _jsxs("div", { className: "appkit-filter-drawer__footer", "data-section": "filterdrawer-div-494", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onReset, children: "Reset all" }), _jsx(Button, { type: "button", variant: "primary", onClick: handleApply, children: pendingCount != null && pendingCount > 0
                                 ? `Apply (${pendingCount})`
                                 : "Apply" })] }), children: _jsx("div", { className: "appkit-filter-drawer__body", "data-section": "filterdrawer-div-495", children: children }) })] }));
 }

package/dist/ui/components/Toast.d.ts

@@ -2,7 +2,10 @@ import React from "react";
 export type ToastVariant = "success" | "error" | "warning" | "info";
 export type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
 interface ToastContextValue {
-    showToast: (message: string, variant?: ToastVariant, duration?: number) => void;
+    showToast: (message: string, variant?: ToastVariant, duration?: number, action?: {
+        label: string;
+        onClick: () => void;
+    }) => void;
     hideToast: (id: string) => void;
 }
 export declare function useToast(): ToastContextValue;

package/dist/ui/components/Toast.js

@@ -38,9 +38,9 @@ export function ToastProvider({ children, position = "top-right", }) {
     const hideToast = React.useCallback((id) => {
         setToasts((current) => current.filter((toast) => toast.id !== id));
     }, []);
-    const showToast = React.useCallback((message, variant = "info", duration = 5000) => {
+    const showToast = React.useCallback((message, variant = "info", duration = 5000, action) => {
         const id = buildToastId();
-        setToasts((current) => [...current, { id, message, variant, duration }]);
+        setToasts((current) => [...current, { id, message, variant, duration, action }]);
         if (duration > 0) {
             window.setTimeout(() => hideToast(id), duration);
         }
@@ -56,5 +56,5 @@ function ToastRow({ toast, onClose, }) {
         warning: _jsx("span", { "aria-hidden": "true", children: "!" }),
         info: _jsx("span", { "aria-hidden": "true", children: "i" }),
     };
-    return (_jsxs("div", { role: "alert", "data-testid": "toast", className: [UI_TOAST.row, UI_TOAST.variants[toast.variant]].join(" "), "data-section": "toast-div-624", children: [_jsx("div", { className: UI_TOAST.icon, "data-section": "toast-div-625", children: iconMap[toast.variant] }), _jsx(Text, { as: "div", size: "sm", weight: "medium", className: "flex-1 pr-1", children: toast.message }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onClose(toast.id), className: "min-h-0 shrink-0 px-2 py-1", "aria-label": "Close notification", children: "\u00D7" })] }));
+    return (_jsxs("div", { role: "alert", "data-testid": "toast", className: [UI_TOAST.row, UI_TOAST.variants[toast.variant]].join(" "), "data-section": "toast-div-624", children: [_jsx("div", { className: UI_TOAST.icon, "data-section": "toast-div-625", children: iconMap[toast.variant] }), _jsx(Text, { as: "div", size: "sm", weight: "medium", className: "flex-1 pr-1", children: toast.message }), toast.action && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => { toast.action.onClick(); onClose(toast.id); }, className: "min-h-0 shrink-0 px-2 py-1 font-semibold underline", children: toast.action.label })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onClose(toast.id), className: "min-h-0 shrink-0 px-2 py-1", "aria-label": "Close notification", children: "\u00D7" })] }));
 }

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 export interface FormShellStep {
     id: string;
     label: string;
@@ -45,4 +45,22 @@ export interface FormShellProps {
 }
 export declare const FormShellContext: React.Context<FormShellContextValue | null>;
 export declare function useFormShell(): FormShellContextValue;
+export interface UseFormShellStateResult {
+    shellCtx: FormShellContextValue;
+    setFieldError: (name: string, error: string | null) => void;
+    clearErrors: () => void;
+    hasErrors: boolean;
+}
+export declare function useFormShellState(): UseFormShellStateResult;
+export interface FormShellProviderProps {
+    children: ReactNode;
+    /** Called on debounced auto-save when isDirty changes */
+    onSaveDraft?: (values: Record<string, unknown>) => Promise<void>;
+    /** Whether any values differ from the persisted state — triggers auto-save */
+    isDirty?: boolean;
+    autoSaveDelayMs?: number;
+    /** Current form values — passed into onSaveDraft on auto-save */
+    values?: Record<string, unknown>;
+}
+export declare function FormShellProvider({ children, onSaveDraft, isDirty, autoSaveDelayMs, values, }: FormShellProviderProps): import("react/jsx-runtime").JSX.Element;
 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

@@ -11,6 +11,39 @@ export function useFormShell() {
         throw new Error("useFormShell must be used inside <FormShell>");
     return ctx;
 }
+export function useFormShellState() {
+    const [errors, setErrors] = useState({});
+    const setFieldError = useCallback((name, error) => {
+        setErrors((prev) => {
+            if (!error) {
+                const n = { ...prev };
+                delete n[name];
+                return n;
+            }
+            if (prev[name] === error)
+                return prev;
+            return { ...prev, [name]: error };
+        });
+    }, []);
+    const clearErrors = useCallback(() => setErrors({}), []);
+    const shellCtx = useMemo(() => ({
+        errors,
+        touched: Object.fromEntries(Object.keys(errors).map((k) => [k, true])),
+        setFieldError,
+        setFieldTouched: () => { },
+        clearFieldError: (name) => setFieldError(name, null),
+        steps: [],
+        currentStep: 0,
+        goToStep: () => { },
+        nextStep: () => { },
+        prevStep: () => { },
+        isPublishReady: Object.keys(errors).length === 0,
+        isDirty: false,
+        isSubmitting: false,
+        stepErrorCounts: [],
+    }), [errors, setFieldError]);
+    return { shellCtx, setFieldError, clearErrors, hasErrors: Object.keys(errors).length > 0 };
+}
 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;
@@ -30,6 +63,65 @@ function ErrorSummary({ errors, visible }) {
         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))) })] }));
 }
+export function FormShellProvider({ children, onSaveDraft, isDirty = false, autoSaveDelayMs = 2000, values = {}, }) {
+    const [errors, setErrors] = useState({});
+    const [touched, setTouched] = useState({});
+    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]);
+    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 ctx = useMemo(() => ({
+        errors,
+        touched,
+        setFieldError,
+        setFieldTouched,
+        clearFieldError,
+        steps: [],
+        currentStep: 0,
+        goToStep: () => { },
+        nextStep: () => { },
+        prevStep: () => { },
+        isPublishReady: true,
+        isDirty,
+        isSubmitting: false,
+        stepErrorCounts: [],
+    }), [errors, touched, setFieldError, setFieldTouched, clearFieldError, isDirty]);
+    return _jsx(FormShellContext.Provider, { value: ctx, children: children });
+}
 // ─── 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({});

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

@@ -1,5 +1,5 @@
-export type { FormShellProps, FormShellStep, FormShellContextValue, } from "./FormShell";
-export { FormShell, useFormShell } from "./FormShell";
+export type { FormShellProps, FormShellProviderProps, FormShellStep, FormShellContextValue, UseFormShellStateResult, } from "./FormShell";
+export { FormShell, FormShellProvider, FormShellContext, useFormShell, useFormShellState } from "./FormShell";
 export type { FieldInputProps } from "./FieldInput";
 export { FieldInput } from "./FieldInput";
 export type { FieldSelectProps } from "./FieldSelect";

package/dist/ui/forms/index.js

@@ -1,4 +1,4 @@
-export { FormShell, useFormShell } from "./FormShell";
+export { FormShell, FormShellProvider, FormShellContext, useFormShell, useFormShellState } from "./FormShell";
 export { FieldInput } from "./FieldInput";
 export { FieldSelect } from "./FieldSelect";
 export { FieldCheckbox } from "./FieldCheckbox";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.7.45",
+  "version": "2.7.47",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -143,6 +143,7 @@
   },
   "scripts": {
     "build": "node -e \"const fs=require('fs');try{fs.rmSync('tsconfig.build.tsbuildinfo')}catch(e){}\" && tsc -p tsconfig.build.json && node scripts/copy-assets.mjs && tailwindcss -i src/tailwind-input.css -o dist/tailwind-utilities.css --minify && node scripts/verify-css-build.mjs",
+    "prepublishOnly": "npm run build",
     "watch": "concurrently --kill-others --restart-tries 0 --names \"ts,css\" \"tsc -p tsconfig.build.json --watch\" \"npm run watch:css\"",
     "watch:css": "tailwindcss -i src/tailwind-input.css -o dist/tailwind-utilities.css --watch",
     "audit": "node scripts/audit-violations.mjs",