@mohasinac/appkit 2.2.0 → 2.3.1

package/dist/ui/components/AvatarDisplay.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Span } from "./Typography";
 const UI_AVATAR_DISPLAY = {
@@ -36,7 +35,7 @@ export function AvatarDisplay({ cropData, size = "md", className = "", alt = "Pr
                 className,
             ]
                 .filter(Boolean)
-                .join(" "), children: _jsx(Span, { className: UI_AVATAR_DISPLAY.initialsText, children: initials }) }));
+                .join(" "), "data-section": "avatardisplay-div-454", children: _jsx(Span, { className: UI_AVATAR_DISPLAY.initialsText, children: initials }) }));
     }
     return (_jsx("div", { role: "img", "aria-label": alt, className: [
             UI_AVATAR_DISPLAY.base,
@@ -45,7 +44,7 @@ export function AvatarDisplay({ cropData, size = "md", className = "", alt = "Pr
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: _jsx("div", { className: UI_AVATAR_DISPLAY.imageInner, style: {
+            .join(" "), "data-section": "avatardisplay-div-455", children: _jsx("div", { className: UI_AVATAR_DISPLAY.imageInner, style: {
                 backgroundImage: `url(${cropData.url})`,
                 backgroundSize: "cover",
                 width: `${(cropData.zoom || 1) * 100}%`,

package/dist/ui/components/BackgroundRenderer.js

@@ -36,7 +36,7 @@ export function BackgroundRenderer({ mode, lightMode, darkMode, }) {
             opacity: config.overlay.opacity,
         }
         : { display: "none" };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-bg-renderer", style: getBackgroundStyle(), children: config.type === "video" && (_jsxs("video", { ref: videoRef, autoPlay: true, loop: true, muted: true, playsInline: true, onLoadedData: () => setIsVideoLoaded(true), className: `appkit-bg-renderer__video ${isVideoLoaded
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-bg-renderer", style: getBackgroundStyle(), "data-section": "backgroundrenderer-div-456", children: config.type === "video" && (_jsxs("video", { ref: videoRef, autoPlay: true, loop: true, muted: true, playsInline: true, onLoadedData: () => setIsVideoLoaded(true), className: `appkit-bg-renderer__video ${isVideoLoaded
                         ? "appkit-bg-renderer__video--loaded"
                         : "appkit-bg-renderer__video--loading"}`, children: [_jsx("source", { src: config.value, type: "video/mp4" }), "Your browser does not support the video tag."] })) }), _jsx("div", { className: "appkit-bg-renderer__overlay", style: overlayStyle })] }));
 }

package/dist/ui/components/BaseListingCard.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "./Button";
 import { Span } from "./Typography";
@@ -24,7 +23,7 @@ function BaseListingCardRoot({ className = "", isSelected, isDisabled, onClick,
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: children }));
+            .join(" "), "data-section": "baselistingcard-div-457", children: children }));
 }
 function BaseListingCardHero({ aspect, className = "", children, onMouseEnter, onMouseLeave, }) {
     const aspectClass = aspect === "square"
@@ -34,13 +33,16 @@ function BaseListingCardHero({ aspect, className = "", children, onMouseEnter, o
             : `aspect-[${aspect}]`;
     return (_jsx("div", { className: [UI_LISTING_CARD.hero, aspectClass, className]
             .filter(Boolean)
-            .join(" "), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children }));
+            .join(" "), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-section": "baselistingcard-div-458", children: children }));
 }
 function BaseListingCardInfo({ className = "", children, }) {
-    return (_jsx("div", { className: [UI_LISTING_CARD.info, className].filter(Boolean).join(" "), children: children }));
+    return (_jsx("div", { className: [UI_LISTING_CARD.info, className].filter(Boolean).join(" "), "data-section": "baselistingcard-div-459", children: children }));
 }
 function BaseListingCardCheckbox({ selected, onSelect, label, position = "top-2 left-2", className = "", }) {
-    return (_jsx(Button, { type: "button", "aria-label": label ?? (selected ? "Deselect" : "Select"), onClick: onSelect, className: [
+    return (_jsx(Button, { type: "button", "aria-label": label ?? (selected ? "Deselect" : "Select"), onClick: (e) => {
+            e.stopPropagation();
+            onSelect?.(e);
+        }, className: [
             UI_LISTING_CARD.checkbox,
             selected ? UI_LISTING_CARD.checkboxSelected : "",
             position,

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

@@ -1,4 +1,3 @@
-import "client-only";
 /**
  * BulkActionBar
  *

package/dist/ui/components/BulkActionBar.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 /**
  * BulkActionBar
  *
@@ -54,7 +53,7 @@ export function BulkActionBar({ selectedCount, onClearSelection, actions = [], l
         selectedAction?.onClick();
         setPickerOpen(false);
     };
-    return (_jsxs("div", { ref: containerRef, className: "appkit-bulk-bar", role: "region", "aria-live": "polite", "aria-label": l.bulkActions, children: [_jsx("div", { className: "appkit-bulk-bar__stripe" }), _jsxs("div", { className: "appkit-bulk-bar__row", children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: onClearSelection, className: "appkit-bulk-bar__count-pill", "aria-label": l.clearSelection, children: [_jsx(X, { className: "appkit-bulk-bar__count-icon", "aria-hidden": "true" }), _jsxs(Span, { className: "appkit-bulk-bar__count-label", children: [selectedCount, " ", l.selected] })] }), actions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
+    return (_jsxs("div", { ref: containerRef, className: "appkit-bulk-bar", role: "region", "aria-live": "polite", "aria-label": l.bulkActions, "data-section": "bulkactionbar-div-460", children: [_jsx("div", { className: "appkit-bulk-bar__stripe" }), _jsxs("div", { className: "appkit-bulk-bar__row", "data-section": "bulkactionbar-div-461", children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: onClearSelection, className: "appkit-bulk-bar__count-pill", "aria-label": l.clearSelection, children: [_jsx(X, { className: "appkit-bulk-bar__count-icon", "aria-hidden": "true" }), _jsxs(Span, { className: "appkit-bulk-bar__count-label", children: [selectedCount, " ", l.selected] })] }), actions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
                             "appkit-bulk-bar__picker-trigger",
                             selectedAction?.variant === "danger"
                                 ? "appkit-bulk-bar__picker-trigger--danger"
@@ -68,7 +67,7 @@ export function BulkActionBar({ selectedCount, onClearSelection, actions = [], l
                     pickerOpen ? "appkit-bulk-bar__dropdown--open" : "",
                 ]
                     .filter(Boolean)
-                    .join(" "), children: actions.map((action) => (_jsxs("button", { role: "option", "aria-selected": selectedActionId === action.id, disabled: action.disabled, onClick: () => {
+                    .join(" "), "data-section": "bulkactionbar-div-462", children: actions.map((action) => (_jsxs("button", { role: "option", "aria-selected": selectedActionId === action.id, disabled: action.disabled, onClick: () => {
                         setSelectedActionId(action.id);
                         setPickerOpen(false);
                     }, className: [

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

@@ -48,13 +48,13 @@
 }
 
 .appkit-button--primary {
-  background: #509c02;
+  background: #3e7708;
   color: #ffffff;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
 .appkit-button--primary:hover:not(:disabled) {
-  background: #3e7708;
+  background: #2f5a06;
 }
 
 .dark .appkit-button--primary {

package/dist/ui/components/Card.js

@@ -37,15 +37,15 @@ export function Card({ children, variant = "flat", padding = "md", hover = false
             className,
         ]
             .filter(Boolean)
-            .join(" "), style: style, onClick: onClick, children: children }));
+            .join(" "), style: style, onClick: onClick, "data-section": "card-div-463", children: children }));
 }
 export function CardHeader({ children, className = "" }) {
-    return (_jsx("div", { className: ["appkit-card__header", className].filter(Boolean).join(" "), children: children }));
+    return (_jsx("div", { className: ["appkit-card__header", className].filter(Boolean).join(" "), "data-section": "card-div-464", children: children }));
 }
 export function CardBody({ children, className = "" }) {
-    return _jsx("div", { className: className, children: children });
+    return _jsx("div", { className: className, "data-section": "card-div-465", children: children });
 }
 export function CardFooter({ children, className = "" }) {
-    return (_jsx("div", { className: ["appkit-card__footer", className].filter(Boolean).join(" "), children: children }));
+    return (_jsx("div", { className: ["appkit-card__footer", className].filter(Boolean).join(" "), "data-section": "card-div-466", children: children }));
 }
 export default Card;

package/dist/ui/components/Checkbox.js

@@ -23,7 +23,7 @@ export function Checkbox({ label, suffix, error, indeterminate = false, classNam
             inputRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    return (_jsxs("div", { className: UI_CHECKBOX.base, children: [_jsxs(Label, { htmlFor: inputId, className: [
+    return (_jsxs("div", { className: UI_CHECKBOX.base, "data-section": "checkbox-div-467", children: [_jsxs(Label, { htmlFor: inputId, className: [
                     UI_CHECKBOX.label,
                     disabled ? UI_CHECKBOX.labelDisabled : "",
                 ]

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

@@ -1,4 +1,3 @@
-import "client-only";
 export interface ConfirmDeleteModalProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/ui/components/ConfirmDeleteModal.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { useEffect } from "react";
 import { Card } from "./Card";
 import { Heading, Text } from "./Typography";
@@ -67,8 +66,8 @@ export function ConfirmDeleteModal({ isOpen, onClose, onConfirm, title = "Delete
     }, [isOpen]);
     if (!isOpen)
         return null;
-    return (_jsx("div", { "data-testid": "confirm-delete-modal", className: UI_CONFIRM_MODAL.backdrop, onClick: onClose, children: _jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsxs(Card, { className: UI_CONFIRM_MODAL.body, children: [_jsx("div", { className: UI_CONFIRM_MODAL.iconWrap, children: _jsx("div", { className: [
+    return (_jsx("div", { "data-testid": "confirm-delete-modal", className: UI_CONFIRM_MODAL.backdrop, onClick: onClose, children: _jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsxs(Card, { className: UI_CONFIRM_MODAL.body, children: [_jsx("div", { className: UI_CONFIRM_MODAL.iconWrap, "data-section": "confirmdeletemodal-div-469", children: _jsx("div", { className: [
                                 UI_CONFIRM_MODAL.icon,
                                 UI_CONFIRM_MODAL.iconVariant[variant],
-                            ].join(" "), children: _jsx("svg", { className: UI_CONFIRM_MODAL.iconSvg, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }) }), _jsxs("div", { className: UI_CONFIRM_MODAL.content, children: [_jsx(Heading, { level: 4, children: title }), _jsx(Text, { className: UI_CONFIRM_MODAL.message, children: message })] }), _jsxs("div", { className: UI_CONFIRM_MODAL.actions, children: [_jsx(Button, { variant: "secondary", onClick: onClose, disabled: isDeleting, className: UI_CONFIRM_MODAL.actionBtn, children: cancelText }), _jsx(Button, { variant: styles.buttonVariant, onClick: onConfirm, disabled: isDeleting, className: UI_CONFIRM_MODAL.actionBtn, children: isDeleting ? styles.loadingText : confirmText })] })] }) }) }));
+                            ].join(" "), "data-section": "confirmdeletemodal-div-470", children: _jsx("svg", { className: UI_CONFIRM_MODAL.iconSvg, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }) }), _jsxs("div", { className: UI_CONFIRM_MODAL.content, "data-section": "confirmdeletemodal-div-471", children: [_jsx(Heading, { level: 4, children: title }), _jsx(Text, { className: UI_CONFIRM_MODAL.message, children: message })] }), _jsxs("div", { className: UI_CONFIRM_MODAL.actions, "data-section": "confirmdeletemodal-div-472", children: [_jsx(Button, { variant: "secondary", onClick: onClose, disabled: isDeleting, className: UI_CONFIRM_MODAL.actionBtn, children: cancelText }), _jsx(Button, { variant: styles.buttonVariant, onClick: onConfirm, disabled: isDeleting, className: UI_CONFIRM_MODAL.actionBtn, children: isDeleting ? styles.loadingText : confirmText })] })] }) }) }));
 }

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

@@ -1,4 +1,3 @@
-import "client-only";
 export interface CountdownRemaining {
     days: number;
     hours: number;

package/dist/ui/components/CountdownDisplay.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import "client-only";
 import { useEffect, useMemo, useState } from "react";
 import { Span } from "./Typography";
 import { classNames } from "../style.helper";

package/dist/ui/components/DashboardStatsCard.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from "./Typography";
 const UI_STATS_CARD = {
@@ -18,7 +17,7 @@ export function DashboardStatsCard({ label, value, icon: Icon, iconBg = "bg-zinc
             UI_STATS_CARD.base,
             isDark ? UI_STATS_CARD.dark : "",
             className,
-        ].join(" "), children: [Icon ? (_jsx("div", { className: [UI_STATS_CARD.iconWrap, iconBg].join(" "), children: _jsx(Icon, { className: `h-5 w-5 ${iconColor}` }) })) : null, _jsxs("div", { className: UI_STATS_CARD.body, children: [_jsx(Text, { className: UI_STATS_CARD.label, children: label }), _jsx(Text, { className: UI_STATS_CARD.value, children: value }), trend ? (_jsxs(Text, { className: [
+        ].join(" "), "data-section": "dashboardstatscard-div-473", children: [Icon ? (_jsx("div", { className: [UI_STATS_CARD.iconWrap, iconBg].join(" "), "data-section": "dashboardstatscard-div-474", children: _jsx(Icon, { className: `h-5 w-5 ${iconColor}` }) })) : null, _jsxs("div", { className: UI_STATS_CARD.body, "data-section": "dashboardstatscard-div-475", children: [_jsx(Text, { className: UI_STATS_CARD.label, children: label }), _jsx(Text, { className: UI_STATS_CARD.value, children: value }), trend ? (_jsxs(Text, { className: [
                             UI_STATS_CARD.trend,
                             trend.value >= 0
                                 ? UI_STATS_CARD.trendUp

package/dist/ui/components/DescriptionField.js

@@ -24,5 +24,5 @@ export function DescriptionField({ label, value, fullWidth, className, }) {
             className ?? "",
         ]
             .filter(Boolean)
-            .join(" "), children: [_jsx("dt", { className: "appkit-description-field__label", children: label }), _jsx("dd", { className: "appkit-description-field__value", children: value })] }));
+            .join(" "), "data-section": "descriptionfield-div-476", children: [_jsx("dt", { className: "appkit-description-field__label", children: label }), _jsx("dd", { className: "appkit-description-field__value", children: value })] }));
 }

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

@@ -1,4 +1,3 @@
-import "client-only";
 /**
  * DetailViewShell
  *
@@ -46,6 +45,21 @@ export interface DetailViewShellProps {
     belowFold?: (ReactNode | (() => ReactNode))[];
     /** Extra content rendered between main grid and belowFold (e.g. mobile bid form). */
     afterMain?: ReactNode;
+    /**
+     * When true and `layout="grid-3"`, makes the 3rd column (action rail) sticky
+     * on desktop. The sticky column stays fixed relative to the viewport as the
+     * user scrolls, aligned to the top of the content area (below the title bar).
+     * On mobile the action rail renders inline; the `BottomActions` bar handles
+     * quick actions via `useBottomActions`.
+     *
+     * @default false
+     */
+    stickyActionRail?: boolean;
+    /**
+     * Top offset for the sticky action rail (e.g. `"top-16"` for a 64px title
+     * bar). Defaults to `"top-6"` (24px, for pages without a sticky header).
+     */
+    stickyRailOffset?: string;
     className?: string;
 }
-export declare function DetailViewShell({ layout, portal, isLoading, renderSkeleton, renderNotFound, renderBreadcrumb, mainSlots, belowFold, afterMain, className, }: DetailViewShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailViewShell({ layout, portal, isLoading, renderSkeleton, renderNotFound, renderBreadcrumb, mainSlots, belowFold, afterMain, stickyActionRail, stickyRailOffset, className, }: DetailViewShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/DetailViewShell.js

@@ -1,6 +1,4 @@
-"use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 /**
  * DetailViewShell
  *
@@ -21,12 +19,13 @@ import "client-only";
 import React from "react";
 import { Div } from "./Div";
 import { Grid } from "./Layout";
+import { THEME_CONSTANTS } from "../../tokens";
 function resolveSlot(slot) {
     return typeof slot === "function" ? slot() : slot;
 }
 export function DetailViewShell({ layout = "stacked", 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-portal, isLoading = false, renderSkeleton, renderNotFound, renderBreadcrumb, mainSlots = [], belowFold = [], afterMain, className = "", }) {
+portal, isLoading = false, renderSkeleton, renderNotFound, renderBreadcrumb, mainSlots = [], belowFold = [], afterMain, stickyActionRail = false, stickyRailOffset = "top-6", className = "", }) {
     if (isLoading && renderSkeleton) {
         return _jsx(_Fragment, { children: renderSkeleton() });
     }
@@ -36,9 +35,14 @@ portal, isLoading = false, renderSkeleton, renderNotFound, renderBreadcrumb, mai
     const mainContent = (() => {
         switch (layout) {
             case "grid-3":
-                return (_jsx(Grid, { cols: "productDetailTriplet", className: "mt-6", children: mainSlots.map((slot, i) => (_jsx(Div, { children: resolveSlot(slot) }, i))) }));
+                return (_jsx(Grid, { cols: "productDetailTriplet", className: "mt-6", children: mainSlots.map((slot, i) => {
+                        const isRailSlot = i === 2 && stickyActionRail;
+                        return (_jsx(Div, { className: isRailSlot
+                                ? `self-start sticky ${stickyRailOffset}`
+                                : undefined, children: resolveSlot(slot) }, i));
+                    }) }));
             case "grid-2":
-                return (_jsx(Div, { className: "flex gap-8 my-6", children: mainSlots.map((slot, i) => (_jsx(Div, { className: i === 0 ? "w-1/2" : "flex-1", children: resolveSlot(slot) }, i))) }));
+                return (_jsx(Div, { className: `flex flex-col md:flex-row ${THEME_CONSTANTS.spacing.gap.lg} my-6`, children: mainSlots.map((slot, i) => (_jsx(Div, { className: i === 0 ? "w-full md:w-1/2" : "flex-1", children: resolveSlot(slot) }, i))) }));
             case "narrow":
                 return (_jsx(Div, { className: "max-w-3xl mx-auto space-y-6", children: mainSlots.map((slot, i) => (_jsx(React.Fragment, { children: resolveSlot(slot) }, i))) }));
             case "stacked":

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

@@ -3,7 +3,7 @@ export interface DivProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
 }
 /**
- * Semantic `<div>` wrapper for general-purpose layout containers.
+ * Semantic `<div data-section="div-div-477">` wrapper for general-purpose layout containers.
  *
  * Use when no more specific semantic element applies
  * (`<Section>`, `<Article>`, `<Main>`, `<Aside>` etc). Enables

package/dist/ui/components/Div.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 /**
- * Semantic `<div>` wrapper for general-purpose layout containers.
+ * Semantic `<div data-section="div-div-477">` wrapper for general-purpose layout containers.
  *
  * Use when no more specific semantic element applies
  * (`<Section>`, `<Article>`, `<Main>`, `<Aside>` etc). Enables
@@ -15,5 +15,5 @@ import React from "react";
  * </Div>
  * ```
  */
-export const Div = React.forwardRef(({ className = "", children, ...props }, ref) => (_jsx("div", { ref: ref, className: className, ...props, children: children })));
+export const Div = React.forwardRef(({ className = "", children, ...props }, ref) => (_jsx("div", { ref: ref, className: className, ...props, "data-section": "div-div-478", children: children })));
 Div.displayName = "Div";

package/dist/ui/components/Divider.js

@@ -5,7 +5,7 @@ export function Divider({ label, orientation = "horizontal", className = "", })
         return (_jsx("div", { className: `appkit-divider appkit-divider--vertical ${className}`, role: "separator", "aria-orientation": "vertical" }));
     }
     if (label) {
-        return (_jsxs("div", { className: `appkit-divider appkit-divider--labeled ${className}`, role: "separator", children: [_jsx("div", { className: "appkit-divider__line" }), _jsx(Span, { className: "appkit-divider__label", children: label }), _jsx("div", { className: "appkit-divider__line" })] }));
+        return (_jsxs("div", { className: `appkit-divider appkit-divider--labeled ${className}`, role: "separator", "data-section": "divider-div-479", children: [_jsx("div", { className: "appkit-divider__line" }), _jsx(Span, { className: "appkit-divider__label", children: label }), _jsx("div", { className: "appkit-divider__line" })] }));
     }
     return (_jsx("div", { className: `appkit-divider appkit-divider--horizontal ${className}`, role: "separator", "aria-orientation": "horizontal" }));
 }

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

@@ -1,4 +1,3 @@
-import "client-only";
 import React from "react";
 /**
  * Drawer — slide-in panel from left, right, or bottom.

package/dist/ui/components/Drawer.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { useCallback, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { X } from "lucide-react";
@@ -60,7 +59,7 @@ export function Drawer({ isOpen, onClose, title, children, footer, side = "right
     const isBottom = side === "bottom";
     if (typeof document === "undefined")
         return null;
-    return createPortal(_jsxs("div", { className: `appkit-drawer ${isOpen ? "appkit-drawer--open" : "appkit-drawer--closed"}`, onKeyDown: handleKeyDown, children: [_jsx("div", { className: `appkit-drawer__backdrop ${isOpen ? "appkit-drawer__backdrop--open" : "appkit-drawer__backdrop--closed"}`, "aria-hidden": "true", onClick: onClose }), _jsxs("div", { ref: panelRef, tabIndex: -1, role: "dialog", "aria-modal": "true", className: [
+    return createPortal(_jsxs("div", { className: `appkit-drawer ${isOpen ? "appkit-drawer--open" : "appkit-drawer--closed"}`, onKeyDown: handleKeyDown, "data-section": "drawer-div-480", children: [_jsx("div", { className: `appkit-drawer__backdrop ${isOpen ? "appkit-drawer__backdrop--open" : "appkit-drawer__backdrop--closed"}`, "aria-hidden": "true", onClick: onClose }), _jsxs("div", { ref: panelRef, tabIndex: -1, role: "dialog", "aria-modal": "true", className: [
                     "appkit-drawer__panel",
                     base,
                     isBottom
@@ -68,5 +67,5 @@ export function Drawer({ isOpen, onClose, title, children, footer, side = "right
                         : `${SIDE_SIZE[size]} appkit-drawer__panel--full-height`,
                     isOpen ? open : closed,
                     className,
-                ].join(" "), children: [isBottom && (_jsx("div", { className: "appkit-drawer__drag-wrap", children: _jsx("div", { className: "appkit-drawer__drag", "aria-hidden": "true" }) })), (title || showCloseButton) && (_jsxs("div", { className: "appkit-drawer__header", children: [title && (_jsx(Heading, { level: 2, className: "appkit-drawer__title", children: title })), showCloseButton && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-drawer__close", "aria-label": "Close", children: _jsx(X, { className: "appkit-drawer__close-icon" }) }))] })), _jsx("div", { className: "appkit-drawer__body", children: children }), footer && _jsx("div", { className: "appkit-drawer__footer", children: footer })] })] }), document.body);
+                ].join(" "), "data-section": "drawer-div-481", children: [isBottom && (_jsx("div", { className: "appkit-drawer__drag-wrap", "data-section": "drawer-div-482", children: _jsx("div", { className: "appkit-drawer__drag", "aria-hidden": "true" }) })), (title || showCloseButton) && (_jsxs("div", { className: "appkit-drawer__header", "data-section": "drawer-div-483", children: [title && (_jsx(Heading, { level: 2, className: "appkit-drawer__title", children: title })), showCloseButton && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-drawer__close", "aria-label": "Close", children: _jsx(X, { className: "appkit-drawer__close-icon" }) }))] })), _jsx("div", { className: "appkit-drawer__body", "data-section": "drawer-div-484", children: children }), footer && _jsx("div", { className: "appkit-drawer__footer", "data-section": "drawer-div-485", children: footer })] })] }), document.body);
 }

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

@@ -1,4 +1,3 @@
-import "client-only";
 import React from "react";
 export interface DropdownMenuItem {
     id?: string;

package/dist/ui/components/Dropdown.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { createContext, useContext, useEffect, useMemo, useRef, useState, } from "react";
 const UI_DROPDOWN = {
     root: "appkit-dropdown",
@@ -121,7 +120,7 @@ export function Dropdown({ trigger, items, align = "right", className = "", menu
                     }) })) : null] }) }));
 }
 export function DropdownTrigger({ className, children, }) {
-    return (_jsx("div", { className: [UI_DROPDOWN.trigger, className ?? ""].join(" "), children: children }));
+    return (_jsx("div", { className: [UI_DROPDOWN.trigger, className ?? ""].join(" "), "data-section": "dropdown-div-488", children: children }));
 }
 export function DropdownMenu({ className, children, }) {
     const { isOpen } = useContext(DropdownContext);

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

@@ -1,4 +1,3 @@
-import "client-only";
 export interface DynamicSelectOption<V = string> {
     value: V;
     label: string;

package/dist/ui/components/DynamicSelect.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Input } from "./Input";
 const UI_DYNAMIC_SELECT = {
@@ -59,12 +58,12 @@ export function DynamicSelect({ value, onChange, options, loadOptions, placehold
         : resolvedOptions;
     const selectedLabel = resolvedOptions.find((option) => option.value === value)?.label ??
         (value == null ? "" : String(value));
-    return (_jsxs("div", { ref: containerRef, className: [UI_DYNAMIC_SELECT.root, className].filter(Boolean).join(" "), "aria-label": ariaLabel, children: [_jsxs("button", { type: "button", disabled: disabled, onClick: () => setOpen((prev) => !prev), className: [
+    return (_jsxs("div", { ref: containerRef, className: [UI_DYNAMIC_SELECT.root, className].filter(Boolean).join(" "), "aria-label": ariaLabel, "data-section": "dynamicselect-div-490", children: [_jsxs("button", { type: "button", disabled: disabled, onClick: () => setOpen((prev) => !prev), className: [
                     UI_DYNAMIC_SELECT.trigger,
                     disabled ? UI_DYNAMIC_SELECT.triggerDisabled : "",
                 ]
                     .filter(Boolean)
-                    .join(" "), children: [_jsx("span", { className: value == null ? UI_DYNAMIC_SELECT.placeholder : "", children: selectedLabel || placeholder }), _jsx("span", { "aria-hidden": "true", children: "\u25BE" })] }), open ? (_jsxs("div", { className: UI_DYNAMIC_SELECT.dropdown, children: [_jsx(Input, { autoFocus: true, value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, className: UI_DYNAMIC_SELECT.search }), _jsxs("ul", { className: UI_DYNAMIC_SELECT.list, children: [filtered.map((option, index) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => {
+                    .join(" "), children: [_jsx("span", { className: value == null ? UI_DYNAMIC_SELECT.placeholder : "", children: selectedLabel || placeholder }), _jsx("span", { "aria-hidden": "true", children: "\u25BE" })] }), open ? (_jsxs("div", { className: UI_DYNAMIC_SELECT.dropdown, "data-section": "dynamicselect-div-491", children: [_jsx(Input, { autoFocus: true, value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, className: UI_DYNAMIC_SELECT.search }), _jsxs("ul", { className: UI_DYNAMIC_SELECT.list, children: [filtered.map((option, index) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => {
                                         onChange?.(option.value, option);
                                         setOpen(false);
                                     }, className: [

package/dist/ui/components/EmptyState.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Heading, Text } from "./Typography";
 import { Card } from "./Card";
@@ -13,5 +12,5 @@ const UI_EMPTY = {
 export function EmptyState({ icon, title, description, action, actionLabel, onAction, actionHref, className = "", }) {
     const resolvedAction = action ??
         (actionLabel && actionHref ? (_jsx(TextLink, { href: actionHref, children: actionLabel })) : actionLabel && onAction ? (_jsx(Button, { type: "button", variant: "primary", onClick: onAction, children: actionLabel })) : null);
-    return (_jsxs(Card, { variant: "outlined", className: [UI_EMPTY.base, className].filter(Boolean).join(" "), children: [icon ? _jsx("div", { className: UI_EMPTY.icon, children: icon }) : null, _jsx(Heading, { level: 3, children: title }), description ? (_jsx(Text, { variant: "secondary", className: UI_EMPTY.description, children: description })) : null, resolvedAction ? (_jsx("div", { className: UI_EMPTY.action, children: resolvedAction })) : null] }));
+    return (_jsxs(Card, { variant: "outlined", className: [UI_EMPTY.base, className].filter(Boolean).join(" "), children: [icon ? _jsx("div", { className: UI_EMPTY.icon, "data-section": "emptystate-div-492", children: icon }) : null, _jsx(Heading, { level: 3, children: title }), description ? (_jsx(Text, { variant: "secondary", className: UI_EMPTY.description, children: description })) : null, resolvedAction ? (_jsx("div", { className: UI_EMPTY.action, "data-section": "emptystate-div-493", children: resolvedAction })) : null] }));
 }

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

@@ -12,5 +12,7 @@ export interface FilterDrawerProps {
     triggerLabel?: string;
     triggerClassName?: string;
     hideTrigger?: boolean;
+    /** Which side the drawer slides in from. Default: "bottom" (slides up, mobile-first). */
+    side?: "left" | "right" | "bottom";
 }
-export declare function FilterDrawer({ children, title, open, onOpen, onClose, onApply, onReset, activeCount, pendingCount, triggerLabel, triggerClassName, hideTrigger, }: FilterDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterDrawer({ children, title, open, onOpen, onClose, onApply, onReset, activeCount, pendingCount, triggerLabel, triggerClassName, hideTrigger, side, }: 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, }) {
+export function FilterDrawer({ children, title = "Filters", open, onOpen, onClose, onApply, onReset, activeCount = 0, pendingCount, triggerLabel = "Filters", triggerClassName = "", hideTrigger = false, side = "bottom", }) {
     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: "left", footer: _jsxs("div", { className: "appkit-filter-drawer__footer", 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, 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", children: children }) })] }));
+                                : "Apply" })] }), children: _jsx("div", { className: "appkit-filter-drawer__body", "data-section": "filterdrawer-div-495", children: children }) })] }));
 }

package/dist/ui/components/FlowDiagram.js

@@ -3,13 +3,13 @@ import { Text, Span } from "./Typography";
 import { THEME_CONSTANTS } from "../../tokens";
 const { themed, flex } = THEME_CONSTANTS;
 export function FlowDiagram({ title, titleClass = "text-primary", connectorClass, steps, stepWidth = "w-[86px]", centered = false, note, className = "", children, }) {
-    return (_jsxs("div", { className: `appkit-flow-diagram ${themed.border} ${className}`, children: [_jsx("div", { className: `appkit-flow-diagram__header ${themed.bgSecondary} ${themed.border}`, children: _jsx(Text, { weight: "semibold", size: "sm", className: titleClass, children: title }) }), _jsxs("div", { className: `appkit-flow-diagram__body ${themed.bgPrimary}`, children: [_jsx("div", { className: `appkit-flow-diagram__chain ${centered ? "appkit-flow-diagram__chain--centered" : "appkit-flow-diagram__chain--scroll"}`, children: steps.flatMap((step, i) => {
+    return (_jsxs("div", { className: `appkit-flow-diagram ${themed.border} ${className}`, "data-section": "flowdiagram-div-496", children: [_jsx("div", { className: `appkit-flow-diagram__header ${themed.bgSecondary} ${themed.border}`, "data-section": "flowdiagram-div-497", children: _jsx(Text, { weight: "semibold", size: "sm", className: titleClass, children: title }) }), _jsxs("div", { className: `appkit-flow-diagram__body ${themed.bgPrimary}`, "data-section": "flowdiagram-div-498", children: [_jsx("div", { className: `appkit-flow-diagram__chain ${centered ? "appkit-flow-diagram__chain--centered" : "appkit-flow-diagram__chain--scroll"}`, "data-section": "flowdiagram-div-499", children: steps.flatMap((step, i) => {
                             const nodes = [
-                                _jsxs("div", { className: `appkit-flow-diagram__step ${stepWidth}`, children: [_jsx("div", { className: `appkit-flow-diagram__circle ${step.circleClass}`, children: step.emoji }), step.title && (_jsx(Text, { size: "xs", weight: "medium", className: "leading-tight", children: step.title })), step.badge && step.badgeClass && (_jsx(Span, { className: `appkit-flow-diagram__badge ${step.badgeClass}`, children: step.badge })), step.desc && (_jsx(Text, { size: "xs", variant: "secondary", className: "leading-tight", children: step.desc }))] }, `s-${i}`),
+                                _jsxs("div", { className: `appkit-flow-diagram__step ${stepWidth}`, "data-section": "flowdiagram-div-500", children: [_jsx("div", { className: `appkit-flow-diagram__circle ${step.circleClass}`, "data-section": "flowdiagram-div-501", children: step.emoji }), step.title && (_jsx(Text, { size: "xs", weight: "medium", className: "leading-tight", children: step.title })), step.badge && step.badgeClass && (_jsx(Span, { className: `appkit-flow-diagram__badge ${step.badgeClass}`, children: step.badge })), step.desc && (_jsx(Text, { size: "xs", variant: "secondary", className: "leading-tight", children: step.desc }))] }, `s-${i}`),
                             ];
                             if (i < steps.length - 1) {
                                 nodes.push(_jsx("div", { className: `appkit-flow-diagram__connector ${connectorClass}` }, `c-${i}`));
                             }
                             return nodes;
-                        }) }), children, note && (_jsx("div", { className: "appkit-flow-diagram__note", children: _jsx(Text, { size: "xs", variant: "secondary", children: note }) }))] })] }));
+                        }) }), children, note && (_jsx("div", { className: "appkit-flow-diagram__note", "data-section": "flowdiagram-div-502", children: _jsx(Text, { size: "xs", variant: "secondary", children: note }) }))] })] }));
 }

package/dist/ui/components/Form.js

@@ -28,12 +28,12 @@ export function FormGroup({ children, columns = 1, gap = "md", className = "", }
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: children }));
+            .join(" "), "data-section": "form-div-503", children: children }));
 }
 export function FormFieldSpan({ children, className = "", }) {
     return (_jsx("div", { className: ["appkit-form-field-span", className]
             .filter(Boolean)
-            .join(" "), children: children }));
+            .join(" "), "data-section": "form-div-504", children: children }));
 }
 export function FormActions({ children, align = "left", className = "", }) {
     const alignClass = {

package/dist/ui/components/FormField.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from "./Input";
 import { Select } from "./Select";
@@ -15,11 +14,11 @@ export function FormField({ label, name, type = "text", value = "", onChange, on
     const errorId = `${inputId}-error`;
     const describedBy = showError ? errorId : undefined;
     if (type === "image" && onUpload) {
-        return (_jsxs("div", { className: "appkit-form-field", 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: "appkit-form-field", "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] }));
     }
     if (type === "media" && onUpload) {
-        return (_jsxs("div", { className: "appkit-form-field", 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] }));
+        return (_jsxs("div", { className: "appkit-form-field", "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] }));
     }
-    return (_jsxs("div", { className: "appkit-form-field", children: [label ? (_jsxs(Label, { htmlFor: inputId, className: "appkit-form-field__label", children: [label, required ? (_jsx(Span, { className: "appkit-form-field__required", children: "*" })) : null] })) : null, type === "select" ? (_jsx(Select, { id: inputId, name: name, value: value, onChange: (event) => onChange?.(event.target.value), onBlur: onBlur, disabled: disabled, options: options, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })) : type === "textarea" ? (_jsx(Textarea, { id: inputId, name: name, value: value, onChange: (event) => onChange?.(event.target.value), onBlur: onBlur, placeholder: placeholder, disabled: disabled, rows: rows, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })) : (_jsx(Input, { id: inputId, name: name, type: type, value: value, onChange: (event) => onChange?.(event.target.value), onBlur: onBlur, placeholder: placeholder, disabled: disabled, autoComplete: autoComplete, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })), !showError && (hint || helpText) ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: hint ?? helpText })) : null, showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
+    return (_jsxs("div", { className: "appkit-form-field", "data-section": "formfield-div-507", children: [label ? (_jsxs(Label, { htmlFor: inputId, className: "appkit-form-field__label", children: [label, required ? (_jsx(Span, { className: "appkit-form-field__required", children: "*" })) : null] })) : null, type === "select" ? (_jsx(Select, { id: inputId, name: name, value: value, onChange: (event) => onChange?.(event.target.value), onBlur: onBlur, disabled: disabled, options: options, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })) : type === "textarea" ? (_jsx(Textarea, { id: inputId, name: name, value: value, onChange: (event) => onChange?.(event.target.value), onBlur: onBlur, placeholder: placeholder, disabled: disabled, rows: rows, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })) : (_jsx(Input, { id: inputId, name: name, type: type, value: value, onChange: (event) => onChange?.(event.target.value), onBlur: onBlur, placeholder: placeholder, disabled: disabled, autoComplete: autoComplete, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })), !showError && (hint || helpText) ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: hint ?? helpText })) : null, showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
 }
 export default FormField;

package/dist/ui/components/FormGrid.js

@@ -24,7 +24,7 @@ export function FormGrid({ children, minFieldWidth = 280, gap = 16, className, }
     return (_jsx("div", { className: ["appkit-form-grid", className].filter(Boolean).join(" "), style: {
             gap: `${gap}px`,
             "--appkit-form-grid-min-field": `${minFieldWidth}px`,
-        }, children: children }));
+        }, "data-section": "formgrid-div-508", children: children }));
 }
 /**
  * `FormField` — a single form field slot inside a `FormGrid`.
@@ -38,5 +38,5 @@ export function FormField({ children, span = "auto", className, }) {
             : "appkit-form-field--auto";
     return (_jsx("div", { className: ["appkit-form-field", spanMod, className]
             .filter(Boolean)
-            .join(" "), children: children }));
+            .join(" "), "data-section": "formgrid-div-509", children: children }));
 }

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

@@ -6,7 +6,7 @@
   /* gap is driven by the inline style prop */
 }
 
-/* ── FormField ─────────────────────────────────────── */
+/* -- FormField --------------------------------------- */
 
 .appkit-form-field {
   display: flex;

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

@@ -1,4 +1,4 @@
-import { type RefObject, type ReactNode } from "react";
+import { type ReactNode, type RefObject } from "react";
 export interface PerViewConfig {
     base?: number;
     xs?: number;