@mohasinac/appkit 3.5.2 → 3.5.4

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

@@ -21,7 +21,8 @@ export interface BaseListingCardRootProps {
     onTouchEnd?: () => void;
 }
 export interface BaseListingCardHeroProps {
-    aspect?: string;
+    /** Aspect ratio for the hero image — only these two produce a real CSS rule (Tailwind's static scanner can't see a dynamically-interpolated `aspect-[${var}]`). Defaults to `"4/3"`. */
+    aspect?: "square" | "4/3";
     variant?: "grid" | "list";
     className?: string;
     children?: ReactNode;

package/dist/ui/components/BaseListingCard.js

@@ -25,11 +25,10 @@ function BaseListingCardHero({ aspect, variant = "grid", className = "", childre
                 .filter(Boolean)
                 .join(" "), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children }));
     }
-    const aspectClass = aspect === "square"
-        ? "aspect-square"
-        : aspect === "4/3" || !aspect
-            ? "aspect-[4/3]"
-            : `aspect-[${aspect}]`;
+    // Literal, statically-scannable class names only — never interpolate an
+    // arbitrary value into `aspect-[...]`, Tailwind's JIT scanner can't see it
+    // and the rule silently never makes it into the compiled CSS.
+    const aspectClass = aspect === "square" ? "aspect-square" : "aspect-[4/3]";
     return (_jsx("div", { className: [
             "relative overflow-hidden bg-[var(--appkit-color-surface)] flex-shrink-0",
             aspectClass,

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

@@ -160,7 +160,7 @@
 
 /* dark */
 .dark .appkit-bulk-bar {
-  border-color: rgba(233, 30, 140, 0.3);
+  border-color: color-mix(in srgb, var(--appkit-color-primary) 30%, transparent);
 }
 
 .dark .appkit-bulk-bar__stripe {
@@ -168,13 +168,13 @@
 }
 
 .dark .appkit-bulk-bar__count-pill {
-  border-color: rgba(233, 30, 140, 0.35);
-  background: rgba(233, 30, 140, 0.1);
+  border-color: color-mix(in srgb, var(--appkit-color-primary) 35%, transparent);
+  background: color-mix(in srgb, var(--appkit-color-primary) 10%, transparent);
   color: var(--appkit-color-primary-300);
 }
 
 .dark .appkit-bulk-bar__count-pill:hover {
-  background: rgba(233, 30, 140, 0.18);
+  background: color-mix(in srgb, var(--appkit-color-primary) 18%, transparent);
 }
 
 .dark .appkit-bulk-bar__picker-trigger {

package/dist/ui/components/Button.js

@@ -116,6 +116,16 @@ const ACTION_KIND_VARIANT = {
 };
 export function Button({ variant, size = "md", className = "", isLoading = false, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, shadow, justify, asChild = false, action, ...props }) {
     const [confirmOpen, setConfirmOpen] = useState(false);
+    // React 17+ no longer pools SyntheticEvents, so it's safe to hold onto the
+    // original triggering event across the confirmation dialog's async gap and
+    // forward it to the consumer's onClick once confirmed — not the confirm
+    // button's own click event (a different DOM element, with none of the
+    // data-* attributes the caller may have put on the real trigger). Per the
+    // DOM/React event spec, `currentTarget` itself is reset to null once the
+    // original event's own synchronous dispatch finishes, so it's captured
+    // separately here and restored onto the stored event before forwarding.
+    const pendingEventRef = React.useRef(null);
+    const pendingTargetRef = React.useRef(null);
     // Resolve defaults from action registry
     const resolvedVariant = variant ?? (action ? (ACTION_KIND_VARIANT[action.kind] ?? "primary") : "primary");
     const resolvedChildren = children ?? (action ? action.label : undefined);
@@ -159,37 +169,57 @@ export function Button({ variant, size = "md", className = "", isLoading = false
         }
         if (action?.confirmation) {
             event.preventDefault();
+            pendingEventRef.current = event;
+            pendingTargetRef.current = event.currentTarget;
             setConfirmOpen(true);
             return;
         }
         wrapAsync(userOnClick)(event);
     }, [disabled, isLoading, action, userOnClick, wrapAsync]);
-    const handleConfirm = useCallback((event) => {
+    const handleConfirm = useCallback(() => {
         setConfirmOpen(false);
-        wrapAsync(userOnClick)(event);
+        const originalEvent = pendingEventRef.current;
+        const originalTarget = pendingTargetRef.current;
+        pendingEventRef.current = null;
+        pendingTargetRef.current = null;
+        if (originalEvent) {
+            originalEvent.currentTarget = originalTarget;
+            wrapAsync(userOnClick)(originalEvent);
+        }
     }, [userOnClick, wrapAsync]);
-    if (asChild && React.isValidElement(resolvedChildren)) {
-        const child = resolvedChildren;
-        return React.cloneElement(child, {
-            ...props,
-            className: twMerge(String(child.props.className ?? ""), classes),
-            ...(disabled ? { "aria-disabled": true } : {}),
-        });
-    }
     const confirmDef = action?.confirmation;
     const confirmVariant = confirmDef?.confirmKind
         ? (ACTION_KIND_VARIANT[confirmDef.confirmKind] ?? "primary")
         : "primary";
-    return (_jsxs(_Fragment, { children: [_jsxs("button", { className: classes, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...props, "aria-label": resolvedAriaLabel, onClick: handleClick, children: [isLoading && (_jsx(Loader2, { className: "appkit-button__spinner", "aria-hidden": "true" })), isLoading ? (_jsx("span", { className: "appkit-button__content appkit-button__content--loading", children: resolvedChildren })) : (_jsx("span", { className: "appkit-button__content", children: resolvedChildren }))] }), confirmOpen && confirmDef && typeof document !== "undefined" && createPortal(_jsx("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": "appkit-action-confirm-title", style: {
-                    position: "fixed", inset: 0, zIndex: "var(--appkit-z-confirm, 1000)",
-                    display: "flex", alignItems: "center", justifyContent: "center",
-                    background: "rgba(0,0,0,0.45)", backdropFilter: "blur(2px)",
-                }, onClick: (e) => { if (e.target === e.currentTarget)
-                    setConfirmOpen(false); }, children: _jsxs("div", { style: {
-                        background: "var(--appkit-color-surface)",
-                        borderRadius: "var(--appkit-radius-lg, 12px)",
-                        padding: "1.5rem",
-                        maxWidth: "380px", width: "calc(100% - 2rem)",
-                        boxShadow: "var(--appkit-shadow-lg, 0 20px 60px rgba(0,0,0,0.2))",
-                    }, children: [_jsx("p", { id: "appkit-action-confirm-title", style: { fontWeight: 600, marginBottom: "0.5rem", fontSize: "1rem" }, children: confirmDef.title }), _jsx("p", { style: { fontSize: "0.875rem", color: "var(--appkit-color-text-muted)", marginBottom: "1.25rem" }, children: confirmDef.body }), _jsxs("div", { style: { display: "flex", gap: "0.5rem", justifyContent: "flex-end" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmOpen(false), children: confirmDef.cancelLabel ?? "Cancel" }), _jsx(Button, { variant: confirmVariant, size: "sm", onClick: handleConfirm, children: confirmDef.confirmLabel })] })] }) }), document.body)] }));
+    // Built once and rendered alongside EITHER the asChild clone or the plain
+    // <button> below — this must never live inside an early return for only
+    // one of those two branches, or the other branch can never open a
+    // confirmation dialog at all (this was the actual asChild bug: the early
+    // return happened before this JSX was ever reached).
+    const confirmPortal = confirmOpen && confirmDef && typeof document !== "undefined" && createPortal(_jsx("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": "appkit-action-confirm-title", style: {
+            position: "fixed", inset: 0, zIndex: "var(--appkit-z-confirm, 1000)",
+            display: "flex", alignItems: "center", justifyContent: "center",
+            background: "rgba(0,0,0,0.45)", backdropFilter: "blur(2px)",
+        }, onClick: (e) => { if (e.target === e.currentTarget)
+            setConfirmOpen(false); }, children: _jsxs("div", { style: {
+                background: "var(--appkit-color-surface)",
+                borderRadius: "var(--appkit-radius-lg, 12px)",
+                padding: "1.5rem",
+                maxWidth: "380px", width: "calc(100% - 2rem)",
+                boxShadow: "var(--appkit-shadow-lg, 0 20px 60px rgba(0,0,0,0.2))",
+            }, children: [_jsx("p", { id: "appkit-action-confirm-title", style: { fontWeight: 600, marginBottom: "0.5rem", fontSize: "1rem" }, children: confirmDef.title }), _jsx("p", { style: { fontSize: "0.875rem", color: "var(--appkit-color-text-muted)", marginBottom: "1.25rem" }, children: confirmDef.body }), _jsxs("div", { style: { display: "flex", gap: "0.5rem", justifyContent: "flex-end" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmOpen(false), children: confirmDef.cancelLabel ?? "Cancel" }), _jsx(Button, { variant: confirmVariant, size: "sm", onClick: handleConfirm, children: confirmDef.confirmLabel })] })] }) }), document.body);
+    if (asChild && React.isValidElement(resolvedChildren)) {
+        const child = resolvedChildren;
+        // Never spread the caller's raw onClick here — it must go through
+        // handleClick so a configured action.confirmation dialog still gates
+        // the click even when rendering as a cloned child (e.g. next/link).
+        const { onClick: _rawOnClick, ...restProps } = props;
+        return (_jsxs(_Fragment, { children: [React.cloneElement(child, {
+                    ...restProps,
+                    className: twMerge(String(child.props.className ?? ""), classes),
+                    ...(disabled ? { "aria-disabled": true } : {}),
+                    onClick: handleClick,
+                }), confirmPortal] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { className: classes, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...props, "aria-label": resolvedAriaLabel, onClick: handleClick, children: [isLoading && (_jsx(Loader2, { className: "appkit-button__spinner", "aria-hidden": "true" })), isLoading ? (_jsx("span", { className: "appkit-button__content appkit-button__content--loading", children: resolvedChildren })) : (_jsx("span", { className: "appkit-button__content", children: resolvedChildren }))] }), confirmPortal] }));
 }

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

@@ -115,60 +115,61 @@
 }
 
 .appkit-button.appkit-button--secondary {
-  background: var(--appkit-color-surface);
+  background: var(--appkit-color-primary-50);
   border-color: var(--appkit-color-primary-700);
   color: var(--appkit-color-primary-700);
 }
 
 .appkit-button.appkit-button--secondary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--appkit-color-primary-700) 8%, transparent);
+  background: var(--appkit-color-primary-100);
 }
 
 .dark .appkit-button.appkit-button--secondary {
-  background: transparent;
+  background: color-mix(in srgb, var(--appkit-color-secondary) 16%, transparent);
   border-color: var(--appkit-color-secondary);
   color: var(--appkit-color-secondary);
 }
 
 .dark .appkit-button.appkit-button--secondary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--appkit-color-secondary) 12%, transparent);
+  background: color-mix(in srgb, var(--appkit-color-secondary) 26%, transparent);
 }
 
 .appkit-button--outline {
-  background: var(--appkit-color-surface);
-  border-color: var(--appkit-color-border);
+  background: color-mix(in srgb, var(--appkit-color-primary-700) 6%, var(--appkit-color-surface));
+  border-color: var(--appkit-color-primary-300);
   color: var(--appkit-color-text);
 }
 
 .appkit-button--outline:hover:not(:disabled) {
-  background: var(--appkit-color-bg);
+  background: color-mix(in srgb, var(--appkit-color-primary-700) 12%, var(--appkit-color-surface));
 }
 
 .dark .appkit-button--outline {
-  background: transparent;
-  border-color: var(--appkit-color-border);
+  background: color-mix(in srgb, var(--appkit-color-secondary) 10%, transparent);
+  border-color: color-mix(in srgb, var(--appkit-color-secondary) 40%, transparent);
   color: var(--appkit-color-text);
 }
 
 .dark .appkit-button--outline:hover:not(:disabled) {
-  background: rgba(30, 41, 59, 0.5);
+  background: color-mix(in srgb, var(--appkit-color-secondary) 18%, transparent);
 }
 
 .appkit-button--ghost {
-  background: transparent;
+  background: var(--appkit-color-border-subtle);
   color: var(--appkit-color-text);
 }
 
 .appkit-button--ghost:hover:not(:disabled) {
-  background: var(--appkit-color-border-subtle);
+  background: var(--appkit-color-border);
 }
 
 .dark .appkit-button--ghost {
+  background: rgba(255, 255, 255, 0.06);
   color: var(--appkit-color-text-muted);
 }
 
 .dark .appkit-button--ghost:hover:not(:disabled) {
-  background: rgba(30, 41, 59, 0.5);
+  background: rgba(255, 255, 255, 0.12);
 }
 
 .appkit-button.appkit-button--danger {

package/dist/ui/components/DateInput.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Label, Span, Text } from "./Typography";

package/dist/ui/components/DynamicBgDiv.js

@@ -7,12 +7,14 @@ export function DynamicBgDiv({ color, background, textColor, className = "", chi
         const el = ref.current;
         if (!el)
             return;
-        if (background)
-            el.style.background = background;
-        else if (color)
-            el.style.backgroundColor = color;
-        if (textColor)
-            el.style.color = textColor;
+        // Explicitly clear every property this component owns before
+        // (re-)applying — otherwise a value set on a previous render (e.g. a
+        // `background` gradient) stays in the inline style forever once that
+        // prop becomes undefined, even though a sibling prop like `color` is
+        // now supposed to take over.
+        el.style.background = background ?? "";
+        el.style.backgroundColor = !background && color ? color : "";
+        el.style.color = textColor ?? "";
     }, [background, color, textColor]);
     return (_jsx("div", { ref: ref, className: className, "aria-hidden": ariaHidden, children: children }));
 }

package/dist/ui/components/FormField.js

@@ -17,7 +17,7 @@ export function FormField({ label, name, card = false, type = "text", value = ""
     const errorId = `${inputId}-error`;
     const describedBy = showError ? errorId : undefined;
     if (type === "image" && onUpload) {
-        return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-505", children: [_jsx(ImageUpload, { currentImage: value || undefined, onUpload: onUpload, onChange: (url) => onChange?.(url), label: label ? `${label}${required ? " *" : ""}` : undefined, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", accept: accept, maxSizeMB: maxSizeMB }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
+        return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-505", children: [_jsx("div", { "aria-disabled": disabled || undefined, className: disabled ? "pointer-events-none opacity-60" : undefined, children: _jsx(ImageUpload, { currentImage: value || undefined, onUpload: onUpload, onChange: (url) => onChange?.(url), label: label ? `${label}${required ? " *" : ""}` : undefined, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", accept: accept, maxSizeMB: maxSizeMB }) }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
     }
     if (type === "media" && onUpload) {
         return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-506", children: [_jsx(MediaUploadField, { label: `${label || name}${required ? " *" : ""}`, value: value, onChange: (url) => onChange?.(url), onUpload: onUpload, disabled: disabled, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", captureMode: captureMode ?? "both", accept: accept, maxSizeMB: maxSizeMB }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));

package/dist/ui/components/HorizontalScroller.js

@@ -194,49 +194,68 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         return () => clearInterval(autoScrollTimer.current);
     }, [autoScroll, isPaused, autoScrollInterval, containerRef]);
     useEffect(() => {
-        if (!perView)
+        if (!perView && !loop)
             return;
         const el = containerRef.current;
         if (!el)
             return;
         const observer = new ResizeObserver(([entry]) => {
             const w = entry.contentRect.width;
-            const count = resolvePerView(perView, w);
-            if (count > 0) {
-                setColCount(count);
-                setItemWidth((w - (count - 1) * gap) / count);
+            if (perView) {
+                const count = resolvePerView(perView, w);
+                if (count > 0) {
+                    setColCount(count);
+                    setItemWidth((w - (count - 1) * gap) / count);
+                }
+            }
+            else {
+                // loop is true but no perView hint was given: items render at their
+                // natural width, so measure a real rendered item to get the scroll
+                // stride the clone-buffer offset / edge teleporter need — without
+                // this, itemWidth never resolves and loop mode never initializes.
+                const item = el.querySelector(".appkit-hscroller__item");
+                if (item)
+                    setItemWidth(item.getBoundingClientRect().width);
             }
             updateExtents();
         });
         observer.observe(el);
         return () => observer.disconnect();
-    }, [perView, gap, containerRef, updateExtents]);
+    }, [perView, loop, gap, containerRef, updateExtents]);
     // Recompute extents when content size changes (itemWidth resolved, items count changes).
     useEffect(() => {
         updateExtents();
     }, [updateExtents, itemWidth, itemCount]);
     const content = itemsMode ? (rows > 1 ? (
-    // Grid mode: group items into slides of (rows × colCount) cards
+    // Grid mode: group items into slides of (rows × colCount) cards.
+    // Loop mode prepends a clone of the last slide and appends a clone of the
+    // first slide; handleGridScrollLoop teleports across a full cycle at the
+    // boundary so the strip appears to scroll infinitely.
     (() => {
-        const cols = colCount > 0 ? colCount : 3;
-        const cardsPerSlide = rows * cols;
-        const slideCount = Math.ceil(normalizedItems.length / cardsPerSlide);
-        return Array.from({ length: slideCount }, (_, slideIndex) => {
-            const slideItems = normalizedItems.slice(slideIndex * cardsPerSlide, (slideIndex + 1) * cardsPerSlide);
+        const renderSlide = (slideIndex, key, isClone) => {
+            const slideItems = normalizedItems.slice(slideIndex * gridCardsPerSlide, (slideIndex + 1) * gridCardsPerSlide);
             return (_jsx("div", { className: "appkit-hscroller__slide", style: {
                     display: "grid",
-                    gridTemplateColumns: `repeat(${cols}, 1fr)`,
+                    gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
                     gap: `${gap}px`,
                     width: "100%",
                     flexShrink: 0,
-                }, children: slideItems.map((item, idx) => (_jsx("div", { className: [
+                }, "aria-hidden": isClone ? true : undefined, children: slideItems.map((item, idx) => (_jsx("div", { className: [
                         "appkit-hscroller__item",
                         snapToItems ? "appkit-hscroller__item--snap" : "",
                         itemClassName,
                     ]
                         .filter(Boolean)
-                        .join(" "), style: minItemWidth ? { minWidth: minItemWidth } : undefined, children: renderItem(item, slideIndex * cardsPerSlide + idx) }, keyExtractor ? keyExtractor(item, slideIndex * cardsPerSlide + idx) : slideIndex * cardsPerSlide + idx))) }, `slide-${slideIndex}`));
-        });
+                        .join(" "), style: minItemWidth ? { minWidth: minItemWidth } : undefined, children: renderItem(item, slideIndex * gridCardsPerSlide + idx) }, keyExtractor ? keyExtractor(item, slideIndex * gridCardsPerSlide + idx) : slideIndex * gridCardsPerSlide + idx))) }, key));
+        };
+        const realSlides = Array.from({ length: gridSlideCount }, (_, slideIndex) => renderSlide(slideIndex, `slide-${slideIndex}`, false));
+        if (!gridLoopActive)
+            return realSlides;
+        return [
+            renderSlide(gridSlideCount - 1, "slide-clone-start", true),
+            ...realSlides,
+            renderSlide(0, "slide-clone-end", true),
+        ];
     })()) : loop && itemCount > 0 ? (
     // Circular loop: fixed (itemCount + 2×loopCloneCount) DOM slots.
     // Each slot maps to a real item via modulo — no array cloning, no list growth.

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

@@ -15,7 +15,14 @@ export interface IframeProps extends Omit<IframeHTMLAttributes<HTMLIFrameElement
     aspect?: IframeAspect;
     /** Rounded corners preset. Default `"lg"`. */
     rounded?: IframeRounded;
-    /** Sandbox attribute. Default permits same-origin only. */
+    /**
+     * Sandbox attribute. Default is `"allow-same-origin allow-scripts
+     * allow-popups allow-forms"` — permissive enough for trusted third-party
+     * embeds (payment checkout panels, YouTube). Combining `allow-same-origin`
+     * with `allow-scripts` lets same-origin framed content remove its own
+     * sandbox restrictions, so pass a tighter override for any `src` that
+     * isn't a fully-trusted origin.
+     */
     sandbox?: string;
 }
 export declare function Iframe({ src, title, aspect, rounded, sandbox, loading, ...rest }: IframeProps): import("react").JSX.Element;

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

@@ -184,7 +184,7 @@ export interface ContainerProps extends React.HTMLAttributes<HTMLElement>, Surfa
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Container({ size, as, surface, padding, rounded, border, shadow, className, children, ...props }: ContainerProps): React.JSX.Element;
+export declare function Container({ size, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className, children, ...props }: ContainerProps): React.JSX.Element;
 /**
  * Vertical flex column. Use instead of `<div className="flex flex-col gap-4" data-section="layout-div-535">`.
  *
@@ -245,7 +245,7 @@ export interface StackProps extends React.HTMLAttributes<HTMLElement>, SurfacePr
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Stack({ gap, centered, align, justify, textSize, textWeight, color, divide, direction, wrap, smAlign, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className, children, ...props }: StackProps): React.JSX.Element;
+export declare function Stack({ gap, centered, align, justify, textSize, textWeight, color, divide, direction, wrap, smAlign, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className, children, ...props }: StackProps): React.JSX.Element;
 /**
  * Horizontal flex row. Use instead of `<div className="flex items-center gap-3" data-section="layout-div-536">`.
  *
@@ -315,7 +315,7 @@ declare const TEXT_COLOR_MAP: {
     readonly info: "appkit-color--info";
 };
 type TextColorKey = keyof typeof TEXT_COLOR_MAP;
-export declare function Row({ gap, centered, align, justify, textSize, textWeight, color, wrap, oddEven, divide, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className, children, ...props }: RowProps): React.JSX.Element;
+export declare function Row({ gap, centered, align, justify, textSize, textWeight, color, wrap, oddEven, divide, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className, children, ...props }: RowProps): React.JSX.Element;
 /**
  * Responsive CSS grid. Use instead of `<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" data-section="layout-div-537">`.
  *
@@ -355,5 +355,5 @@ export interface GridProps extends React.HTMLAttributes<HTMLElement>, SurfacePro
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Grid({ cols, gap, align, justify, as, surface, padding, rounded, border, shadow, className, children, ...props }: GridProps): React.JSX.Element;
+export declare function Grid({ cols, gap, align, justify, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className, children, ...props }: GridProps): React.JSX.Element;
 export {};

package/dist/ui/components/Layout.js

@@ -154,9 +154,9 @@ const JUSTIFY_MAP = {
     around: "appkit-justify--around",
     evenly: "appkit-justify--evenly",
 };
-export function Container({ size = "2xl", as, surface, padding, rounded, border, shadow, className = "", children, ...props }) {
+export function Container({ size = "2xl", as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
-    return (_jsx(Tag, { className: ["appkit-container", CONTAINER_MAP[size], buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className]
+    return (_jsx(Tag, { className: ["appkit-container", CONTAINER_MAP[size], buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }), className]
             .filter(Boolean)
             .join(" "), ...props, children: children }));
 }
@@ -178,7 +178,7 @@ function resolveDivideClass(divide, axis) {
     const base = `appkit-${axis}--divide`;
     return divide === "subtle" ? `${base}-subtle` : base;
 }
-export function Stack({ gap = "md", centered = false, align = "stretch", justify = "start", textSize, textWeight, color, divide, direction, wrap = false, smAlign, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className = "", children, ...props }) {
+export function Stack({ gap = "md", centered = false, align = "stretch", justify = "start", textSize, textWeight, color, divide, direction, wrap = false, smAlign, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
     const classes = [
         "appkit-stack",
@@ -193,7 +193,7 @@ export function Stack({ gap = "md", centered = false, align = "stretch", justify
         wrap ? "flex-wrap" : "",
         smAlign ? STACK_SM_ALIGN_MAP[smAlign] : "",
         resolveDivideClass(divide, "stack"),
-        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }),
+        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }),
         className,
     ]
         .filter(Boolean)
@@ -231,7 +231,7 @@ const ROW_ODD_EVEN_MAP = {
     none: "",
     zebra: "even:bg-[var(--appkit-color-surface-input)] dark:even:bg-[var(--appkit-color-bg)]",
 };
-export function Row({ gap = "md", centered = false, align = "center", justify = "start", textSize, textWeight, color, wrap = false, oddEven, divide, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className = "", children, ...props }) {
+export function Row({ gap = "md", centered = false, align = "center", justify = "start", textSize, textWeight, color, wrap = false, oddEven, divide, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
     const classes = [
         "appkit-row",
@@ -244,14 +244,14 @@ export function Row({ gap = "md", centered = false, align = "center", justify =
         textWeight ? TEXT_WEIGHT_MAP[textWeight] : "",
         color ? TEXT_COLOR_MAP[color] : "",
         resolveDivideClass(divide, "row"),
-        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }),
+        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }),
         className,
     ]
         .filter(Boolean)
         .join(" ");
     return (_jsx(Tag, { className: classes, ...props, children: children }));
 }
-export function Grid({ cols, gap = "md", align, justify, as, surface, padding, rounded, border, shadow, className = "", children, ...props }) {
+export function Grid({ cols, gap = "md", align, justify, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
     const baseClass = cols !== undefined ? GRID_MAP[cols] : "appkit-grid";
     const classes = [
@@ -259,7 +259,7 @@ export function Grid({ cols, gap = "md", align, justify, as, surface, padding, r
         GAP_MAP[gap],
         align ? ITEMS_MAP[align] : "",
         justify ? JUSTIFY_MAP[justify] : "",
-        buildSurfaceClasses({ surface, padding, rounded, border, shadow }),
+        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }),
         className,
     ]
         .filter(Boolean)

package/dist/ui/components/ListingToolbar.js

@@ -20,7 +20,7 @@ const DEFAULT_LABELS = {
     clearSelection: "Clear",
 };
 const VIEW_BTN_BASE = "p-1.5 sm:p-2 transition-colors";
-const VIEW_BTN_ACTIVE = "bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white";
+const VIEW_BTN_ACTIVE = "bg-[var(--appkit-color-primary)] text-white";
 const VIEW_BTN_INACTIVE = "text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)]";
 export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue = "", searchPlaceholder = "Search…", onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view = "grid", onViewChange, hideViewToggle = false, showTableView = false, onResetAll, hasActiveState = false, bulkMode = false, bulkSelectedCount = 0, bulkTotalCount = 0, onBulkSelectAll, onBulkClear, toggles, extra, labels, className = "", }) {
     const l = { ...DEFAULT_LABELS, ...labels };
@@ -34,8 +34,8 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
     };
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
     return (_jsx("div", { "data-testid": "listing-toolbar", className: `sticky top-[var(--header-height,0px)] z-20 border-b border-[var(--appkit-color-border)] bg-white/95 bg-[var(--appkit-color-surface)]/95 backdrop-blur-sm py-2 px-3 sm:py-2.5 sm:px-4 ${className}`, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2.5", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-3 py-1.5 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [allSelected
-                                    ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary,theme(colors.violet.600))]" })
-                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary,theme(colors.violet.600))] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
-                                    ? "border-transparent bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white"
+                                    ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary)]" })
+                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary)] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary)] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
+                                    ? "border-transparent bg-[var(--appkit-color-primary)] text-white"
                                     : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]"}`, children: t.label }, t.label))) })), extra] })] }) }));
 }

package/dist/ui/components/Motion.js

@@ -108,7 +108,10 @@ export function AnimatedRow({ delay = 0, children, className, ...props }) {
 }
 export function Draggable({ axis, constraints, dragElastic = 0.1, children, ...props }) {
     const reduced = useReducedMotion();
-    const drag = reduced ? false : (axis === true ? true : axis || true);
+    // `axis` defaults to unrestricted (true) when omitted, but an explicit
+    // `axis={false}` must actually disable dragging — `axis || true` always
+    // collapsed a falsy axis back to `true`, making `axis={false}` a no-op.
+    const drag = reduced ? false : (axis ?? true);
     return (_jsx(motion.div, { drag: drag, dragConstraints: constraints, dragElastic: dragElastic, ...props, children: children }));
 }
 export function Swipeable({ onSwipeLeft, onSwipeRight, threshold = 50, children, ...props }) {

package/dist/ui/components/OtpInput.js

@@ -47,7 +47,7 @@ export function OtpInput({ length = 6, value, onChange, label, error, helperText
         const lastFilled = Math.min(sanitized.length, length - 1);
         focusAt(lastFilled);
     }
-    return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Label, { htmlFor: `${inputId}-0`, className: "appkit-form-field__label mb-2", children: label })), _jsx("div", { className: "flex gap-2", role: "group", "aria-labelledby": label ? `${inputId}-label` : undefined, children: digits.map((digit, i) => (_jsx("input", { ref: (el) => { inputsRef.current[i] = el; }, id: i === 0 ? `${inputId}-0` : undefined, type: "text", inputMode: inputMode, maxLength: 1, value: digit, disabled: disabled, autoFocus: autoFocus && i === 0, autoComplete: "one-time-code", "aria-label": `Digit ${i + 1} of ${length}`, className: [
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Label, { id: `${inputId}-label`, htmlFor: `${inputId}-0`, className: "appkit-form-field__label mb-2", children: label })), _jsx("div", { className: "flex gap-2", role: "group", "aria-labelledby": label ? `${inputId}-label` : undefined, children: digits.map((digit, i) => (_jsx("input", { ref: (el) => { inputsRef.current[i] = el; }, id: i === 0 ? `${inputId}-0` : undefined, type: "text", inputMode: inputMode, maxLength: 1, value: digit, disabled: disabled, autoFocus: autoFocus && i === 0, autoComplete: "one-time-code", "aria-label": `Digit ${i + 1} of ${length}`, className: [
                         "appkit-input",
                         "appkit-otp-input",
                         error ? "appkit-input--error" : "",

package/dist/ui/components/PaginatedSelect.js

@@ -64,15 +64,26 @@ export function PaginatedSelect(props) {
     const [drawerOpen, setDrawerOpen] = useState(false);
     const containerRef = useRef(null);
     const labelMap = useRef(new Map());
+    // Monotonic counter guarding against out-of-order async responses: a
+    // slower earlier request (e.g. for an already-abandoned search query)
+    // must never overwrite state after a faster, more recent request resolved.
+    const requestIdRef = useRef(0);
+    const wasOpenRef = useRef(false);
     const hasCreate = Boolean(createLabel && (renderCreateForm ?? (createFields && onCreateSubmit)));
     const resolvedOptions = options ?? asyncOptions;
     resolvedOptions.forEach((o) => labelMap.current.set(o.value, o.label));
     const load = useCallback(async (search, nextPage, reset = false) => {
         if (!loadOptions)
             return;
+        const requestId = ++requestIdRef.current;
         setLoading(true);
         try {
             const response = await loadOptions(search, nextPage);
+            // A newer request (new search, or the dropdown reopened) was issued
+            // while this one was in flight — its response is stale, discard it
+            // rather than clobbering state a more recent request already set.
+            if (requestId !== requestIdRef.current)
+                return;
             setAsyncOptions((prev) => {
                 const merged = reset ? response.items : [...prev, ...response.items];
                 merged.forEach((o) => labelMap.current.set(o.value, o.label));
@@ -82,13 +93,28 @@ export function PaginatedSelect(props) {
             setHasMore(response.hasMore);
         }
         finally {
-            setLoading(false);
+            if (requestId === requestIdRef.current)
+                setLoading(false);
         }
     }, [loadOptions]);
     useEffect(() => {
-        if (!open || !loadOptions)
+        if (!open || !loadOptions) {
+            wasOpenRef.current = false;
             return;
-        void load(query, 1, true);
+        }
+        // Load immediately the moment the dropdown opens; debounce subsequent
+        // reloads triggered by the user typing so every keystroke doesn't fire
+        // a new request.
+        const isFreshOpen = !wasOpenRef.current;
+        wasOpenRef.current = true;
+        if (isFreshOpen) {
+            void load(query, 1, true);
+            return;
+        }
+        const timer = setTimeout(() => {
+            void load(query, 1, true);
+        }, 300);
+        return () => clearTimeout(timer);
     }, [open, query, load, loadOptions]);
     useEffect(() => {
         if (!open || !containerRef.current)