@mohasinac/appkit 4.9.3 → 4.9.5

package/dist/ui/components/Drawer.js

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { X } from "lucide-react";
 import { Heading } from "./Typography";
 import { Button } from "./Button";
+import { useHandMode } from "../../_internal/client/hand-mode";
 const SIDE_TRANSLATE = {
     left: {
         closed: "appkit-drawer__panel--left-closed",
@@ -28,7 +29,9 @@ const SIDE_SIZE = {
     lg: "appkit-drawer__panel--lg",
     full: "appkit-drawer__panel--full",
 };
-export function Drawer({ isOpen, onClose, title, children, footer, side = "right", size = "md", showCloseButton = true, className = "", }) {
+export function Drawer({ isOpen, onClose, title, children, footer, side, size = "md", showCloseButton = true, className = "", }) {
+    const { hand } = useHandMode();
+    const resolvedSide = side ?? hand;
     const panelRef = useRef(null);
     const prevFocusRef = useRef(null);
     // Body scroll lock
@@ -55,8 +58,8 @@ export function Drawer({ isOpen, onClose, title, children, footer, side = "right
         if (e.key === "Escape")
             onClose();
     }, [onClose]);
-    const { closed, open, base } = SIDE_TRANSLATE[side];
-    const isBottom = side === "bottom";
+    const { closed, open, base } = SIDE_TRANSLATE[resolvedSide];
+    const isBottom = resolvedSide === "bottom";
     if (typeof document === "undefined")
         return null;
     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: [
@@ -67,5 +70,5 @@ export function Drawer({ isOpen, onClose, title, children, footer, side = "right
                         : `${SIDE_SIZE[size]} appkit-drawer__panel--full-height`,
                     isOpen ? open : closed,
                     className,
-                ].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);
+                ].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: hand === "left" ? "appkit-drawer__header flex-row-reverse" : "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/FilterDrawer.js

@@ -5,7 +5,7 @@ import { Button } from "./Button";
 import { Drawer } from "./Drawer";
 import { Span } from "./Typography";
 import { sectionBackgroundStyle } from "./Semantic";
-export function FilterDrawer({ children, title = "Filters", open, onOpen, onClose, onApply, onReset, activeCount = 0, pendingCount, triggerLabel = "Filters", triggerClassName = "", hideTrigger = false, side = "right", size = "md", background, }) {
+export function FilterDrawer({ children, title = "Filters", open, onOpen, onClose, onApply, onReset, activeCount = 0, pendingCount, triggerLabel = "Filters", triggerClassName = "", hideTrigger = false, side, size = "md", background, }) {
     const [internalOpen, setInternalOpen] = React.useState(false);
     const isControlled = open !== undefined;
     const isOpen = isControlled ? open : internalOpen;

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

@@ -0,0 +1,12 @@
+import { type RowProps } from "./Layout";
+/**
+ * HandModeRow — a `<Row>` that mirrors (flex-row-reverse) in left-hand mode.
+ *
+ * `<Row>` itself stays a plain server-safe primitive (no hooks) so it can
+ * keep rendering inside async Server Components. This thin client wrapper
+ * exists specifically for header rows (title + "View All" CTA) that live
+ * inside Server Component sections and still need to flip sides with the
+ * hand-mode preference — render it as a child of the server component
+ * instead of calling `useHandMode()` in the server component itself.
+ */
+export declare function HandModeRow(props: RowProps): import("react").JSX.Element;

package/dist/ui/components/HandModeRow.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Row } from "./Layout";
+import { useHandMode } from "../../_internal/client/hand-mode";
+/**
+ * HandModeRow — a `<Row>` that mirrors (flex-row-reverse) in left-hand mode.
+ *
+ * `<Row>` itself stays a plain server-safe primitive (no hooks) so it can
+ * keep rendering inside async Server Components. This thin client wrapper
+ * exists specifically for header rows (title + "View All" CTA) that live
+ * inside Server Component sections and still need to flip sides with the
+ * hand-mode preference — render it as a child of the server component
+ * instead of calling `useHandMode()` in the server component itself.
+ */
+export function HandModeRow(props) {
+    const { hand } = useHandMode();
+    return _jsx(Row, { reverse: hand === "left", ...props });
+}

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

@@ -279,6 +279,10 @@ export interface RowProps extends React.HTMLAttributes<HTMLElement>, SurfaceProp
     color?: TextColorKey;
     /** Allow children to wrap onto multiple lines. */
     wrap?: boolean;
+    /** Reverse the visual order of children (`flex-direction: row-reverse`) without
+     * touching DOM/source order. Used for hand-mode-aware layouts (e.g. moving a
+     * close button to the opposite header edge) — replaces raw `flex-row-reverse`. */
+    reverse?: boolean;
     /** Zebra-stripe pattern when this Row is a repeating list element (rendered with `even:bg-*`). */
     oddEven?: "none" | "zebra";
     /**
@@ -315,7 +319,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, roundedTop, roundedBottom, border, shadow, overflow, className, children, ...props }: RowProps): React.JSX.Element;
+export declare function Row({ gap, centered, align, justify, textSize, textWeight, color, wrap, reverse, 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">`.
  *

package/dist/ui/components/Layout.js

@@ -231,10 +231,11 @@ 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, roundedTop, roundedBottom, border, shadow, overflow, className = "", children, ...props }) {
+export function Row({ gap = "md", centered = false, align = "center", justify = "start", textSize, textWeight, color, wrap = false, reverse = 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",
+        reverse ? "appkit-row--reverse" : "",
         centered ? "appkit-row--centered" : align !== "center" ? ITEMS_MAP[align] : "",
         !centered && justify !== "start" ? JUSTIFY_MAP[justify] : "",
         GAP_MAP[gap],

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

@@ -58,6 +58,7 @@
 }
 
 .appkit-row--wrap { flex-wrap: wrap; }
+.appkit-row--reverse { flex-direction: row-reverse; }
 .appkit-stack--centered,
 .appkit-row--centered {
   align-items: center;

package/dist/ui/components/ListingFilterDrawer.js

@@ -4,9 +4,11 @@ import { X } from "lucide-react";
 import { Button } from "./Button";
 import { Span } from "./Typography";
 import { sectionBackgroundStyle } from "./Semantic";
+import { useHandMode } from "../../_internal/client/hand-mode";
 const CLS_CLEAR_BTN = "text-xs text-[var(--appkit-color-text-muted)] hover:text-error text-[var(--appkit-color-text-muted)] transition-colors min-h-0 h-auto p-0";
 export function ListingFilterDrawer({ open, onClose, onApply, onClear, activeCount, children, background, }) {
+    const { hand } = useHandMode();
     if (!open)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { className: `fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-[var(--appkit-color-surface)] shadow-2xl${background?.value ? " relative overflow-hidden" : ""}`, children: [background?.value && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, className: "absolute inset-0 -z-10", style: sectionBackgroundStyle(background) }), background.overlay?.enabled && (_jsx(Span, { "aria-hidden": true, className: "absolute inset-0 -z-10", style: { backgroundColor: background.overlay.color, opacity: background.overlay.opacity } }))] })), _jsxs("div", { className: "flex items-center justify-between border-b border-[var(--appkit-color-border)] px-4 py-3.5", children: [_jsx(Span, { size: "base", weight: "semibold", className: "text-[var(--appkit-color-text)]", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeCount > 0 && (_jsx(Button, { variant: "ghost", type: "button", onClick: onClear, className: CLS_CLEAR_BTN, children: "Clear all" })), _jsx(Button, { variant: "ghost", type: "button", onClick: onClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)] transition-colors min-h-0 h-auto", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: children }), _jsx("div", { className: "border-t border-[var(--appkit-color-border)] px-4 py-3.5", children: _jsxs(Button, { type: "button", onClick: onApply, className: "w-full", children: ["Apply Filters", activeCount > 0 ? ` (${activeCount})` : ""] }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { className: `fixed inset-y-0 ${hand === "left" ? "left-0" : "right-0"} z-50 flex w-80 flex-col bg-[var(--appkit-color-surface)] shadow-2xl${background?.value ? " relative overflow-hidden" : ""}`, children: [background?.value && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, className: "absolute inset-0 -z-10", style: sectionBackgroundStyle(background) }), background.overlay?.enabled && (_jsx(Span, { "aria-hidden": true, className: "absolute inset-0 -z-10", style: { backgroundColor: background.overlay.color, opacity: background.overlay.opacity } }))] })), _jsxs("div", { className: `flex items-center justify-between border-b border-[var(--appkit-color-border)] px-4 py-3.5${hand === "left" ? " flex-row-reverse" : ""}`, children: [_jsx(Span, { size: "base", weight: "semibold", className: "text-[var(--appkit-color-text)]", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeCount > 0 && (_jsx(Button, { variant: "ghost", type: "button", onClick: onClear, className: CLS_CLEAR_BTN, children: "Clear all" })), _jsx(Button, { variant: "ghost", type: "button", onClick: onClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)] transition-colors min-h-0 h-auto", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: children }), _jsx("div", { className: "border-t border-[var(--appkit-color-border)] px-4 py-3.5", children: _jsxs(Button, { type: "button", onClick: onApply, className: "w-full", children: ["Apply Filters", activeCount > 0 ? ` (${activeCount})` : ""] }) })] })] }));
 }

package/dist/ui/components/Modal.js

@@ -6,6 +6,7 @@ import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 import { Heading } from "./Typography";
 import { Button } from "./Button";
 import { SPRING_GENTLE } from "../../tokens/motion";
+import { useHandMode } from "../../_internal/client/hand-mode";
 const SIZE_CLASSES = {
     sm: "appkit-modal__panel--sm",
     md: "appkit-modal__panel--md",
@@ -15,6 +16,7 @@ const SIZE_CLASSES = {
 };
 export function Modal({ isOpen, open, onClose, title, children, size = "md", showCloseButton = true, actions, className = "", }) {
     const visible = open ?? isOpen ?? false;
+    const { hand } = useHandMode();
     const titleId = React.useId();
     const panelRef = React.useRef(null);
     const previousFocusRef = React.useRef(null);
@@ -69,7 +71,7 @@ export function Modal({ isOpen, open, onClose, title, children, size = "md", sho
     }
     return createPortal(_jsx(AnimatePresence, { children: visible && (_jsxs(motion.div, { className: "appkit-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, onKeyDown: handleKeyDown, initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, "data-section": "modal-div-561", children: [_jsx("div", { className: "appkit-modal__backdrop", "aria-hidden": "true", onClick: onClose }), _jsxs(motion.div, { ref: panelRef, tabIndex: -1, className: ["appkit-modal__panel", SIZE_CLASSES[size], className]
                         .filter(Boolean)
-                        .join(" "), initial: reduced ? false : { opacity: 0, scale: 0.95, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.95, y: 8 }, transition: SPRING_GENTLE, "data-section": "modal-div-562", children: [(title || showCloseButton) && (_jsxs("div", { className: "appkit-modal__header", "data-section": "modal-div-563", children: [title ? (_jsx(Heading, { level: 2, id: titleId, className: "appkit-modal__title", children: title })) : (_jsx("span", {})), showCloseButton ? (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-modal__close", "aria-label": "Close", children: _jsx("span", { className: "appkit-modal__close-icon", "aria-hidden": "true", children: "\u00D7" }) })) : null] })), _jsx("div", { className: "appkit-modal__body", "data-section": "modal-div-564", children: children }), actions ? _jsx(ModalFooter, { children: actions }) : null] })] })) }), document.body);
+                        .join(" "), initial: reduced ? false : { opacity: 0, scale: 0.95, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.95, y: 8 }, transition: SPRING_GENTLE, "data-section": "modal-div-562", children: [(title || showCloseButton) && (_jsxs("div", { className: hand === "left" ? "appkit-modal__header flex-row-reverse" : "appkit-modal__header", "data-section": "modal-div-563", children: [title ? (_jsx(Heading, { level: 2, id: titleId, className: "appkit-modal__title", children: title })) : (_jsx("span", {})), showCloseButton ? (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-modal__close", "aria-label": "Close", children: _jsx("span", { className: "appkit-modal__close-icon", "aria-hidden": "true", children: "\u00D7" }) })) : null] })), _jsx("div", { className: "appkit-modal__body", "data-section": "modal-div-564", children: children }), actions ? _jsx(ModalFooter, { children: actions }) : null] })] })) }), document.body);
 }
 export function ModalFooter({ children, className = "", }) {
     return (_jsx("div", { className: [

package/dist/ui/components/SideDrawer.js

@@ -9,6 +9,7 @@ import { Heading, Span } from "./Typography";
 import { useSwipe } from "../../react";
 import { Text } from "./Typography";
 import { SPRING_SNAPPY } from "../../tokens/motion";
+import { useHandMode } from "../../_internal/client/hand-mode";
 const UI_SIDE_DRAWER = {
     backdrop: "appkit-side-drawer__backdrop",
     root: "appkit-side-drawer",
@@ -65,7 +66,9 @@ function handleFocusTrap(e, first, last) {
  * </SideDrawer>
  * ```
  */
-export function SideDrawer({ isOpen, onClose, title, children, footer, mode = "view", isDirty = false, side = "right", }) {
+export function SideDrawer({ isOpen, onClose, title, children, footer, mode = "view", isDirty = false, side, }) {
+    const { hand } = useHandMode();
+    const resolvedSide = side ?? hand;
     const drawerRef = useRef(null);
     const [showUnsavedWarning, setShowUnsavedWarning] = useState(false);
     const tActions = useTranslations("actions");
@@ -141,16 +144,16 @@ export function SideDrawer({ isOpen, onClose, title, children, footer, mode = "v
         };
     }, [isOpen]);
     useSwipe(drawerRef, {
-        ...(side === "left"
+        ...(resolvedSide === "left"
             ? { onSwipeLeft: () => attemptClose() }
             : { onSwipeRight: () => attemptClose() }),
         minSwipeDistance: 60,
     });
     const reduced = useReducedMotion();
-    const positionClass = side === "left" ? UI_SIDE_DRAWER.left : UI_SIDE_DRAWER.right;
-    const slideX = side === "left" ? "-100%" : "100%";
+    const positionClass = resolvedSide === "left" ? UI_SIDE_DRAWER.left : UI_SIDE_DRAWER.right;
+    const slideX = resolvedSide === "left" ? "-100%" : "100%";
     return (_jsx(AnimatePresence, { children: isOpen && (_jsxs(_Fragment, { children: [_jsx(motion.div, { className: UI_SIDE_DRAWER.backdrop, onClick: attemptClose, "aria-hidden": "true", initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }), _jsxs(motion.div, { ref: drawerRef, className: [UI_SIDE_DRAWER.root, positionClass].join(" "), role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-title", initial: reduced ? false : { x: slideX }, animate: { x: 0 }, exit: { x: slideX }, transition: SPRING_SNAPPY, "data-section": "sidedrawer-div-598", children: [_jsxs(Row, { justify: "between", gap: "none", className: [
                                 UI_SIDE_DRAWER.header,
                                 UI_SIDE_DRAWER.headerMode[mode],
-                            ].join(" "), children: [_jsxs(Row, { gap: "3", className: "min-w-0", children: [_jsx(Button, { variant: "ghost", onClick: attemptClose, className: UI_SIDE_DRAWER.closeBtn, "aria-label": tActions("close"), children: _jsx("svg", { className: UI_SIDE_DRAWER.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx(Heading, { level: 3, id: "drawer-title", className: "truncate", children: title })] }), mode === "delete" && (_jsx(Span, { className: UI_SIDE_DRAWER.deleteBadge, children: tActions("delete") }))] }), _jsx("div", { className: UI_SIDE_DRAWER.content, "data-section": "sidedrawer-div-599", children: children }), footer && _jsx("div", { className: UI_SIDE_DRAWER.footer, "data-section": "sidedrawer-div-600", children: footer })] }), showUnsavedWarning && (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.warnBackdrop, onClick: cancelClose }), _jsxs("div", { className: UI_SIDE_DRAWER.warnDialog, "data-section": "sidedrawer-div-601", children: [_jsxs("div", { className: UI_SIDE_DRAWER.warnHeader, "data-section": "sidedrawer-div-602", children: [_jsx("div", { className: UI_SIDE_DRAWER.warnIcon, "data-section": "sidedrawer-div-603", children: _jsx("svg", { 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", { "data-section": "sidedrawer-div-604", children: [_jsx(Heading, { level: 4, className: "mb-1", children: tConfirm("unsavedChangesTitle") }), _jsx(Text, { className: UI_SIDE_DRAWER.warnText, children: tConfirm("unsavedChangesDescription") })] })] }), _jsxs("div", { className: UI_SIDE_DRAWER.warnActions, "data-section": "sidedrawer-div-605", children: [_jsx(Button, { variant: "outline", onClick: cancelClose, size: "sm", children: tActions("keepEditing") }), _jsx(Button, { variant: "danger", onClick: confirmClose, size: "sm", children: tActions("discardChanges") })] })] })] }))] })) }));
+                            ].join(" "), children: [_jsxs(Row, { gap: "3", className: "min-w-0", reverse: hand === "left", children: [_jsx(Button, { variant: "ghost", onClick: attemptClose, className: UI_SIDE_DRAWER.closeBtn, "aria-label": tActions("close"), children: _jsx("svg", { className: UI_SIDE_DRAWER.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx(Heading, { level: 3, id: "drawer-title", className: "truncate", children: title })] }), mode === "delete" && (_jsx(Span, { className: UI_SIDE_DRAWER.deleteBadge, children: tActions("delete") }))] }), _jsx("div", { className: UI_SIDE_DRAWER.content, "data-section": "sidedrawer-div-599", children: children }), footer && _jsx("div", { className: UI_SIDE_DRAWER.footer, "data-section": "sidedrawer-div-600", children: footer })] }), showUnsavedWarning && (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.warnBackdrop, onClick: cancelClose }), _jsxs("div", { className: UI_SIDE_DRAWER.warnDialog, "data-section": "sidedrawer-div-601", children: [_jsxs("div", { className: UI_SIDE_DRAWER.warnHeader, "data-section": "sidedrawer-div-602", children: [_jsx("div", { className: UI_SIDE_DRAWER.warnIcon, "data-section": "sidedrawer-div-603", children: _jsx("svg", { 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", { "data-section": "sidedrawer-div-604", children: [_jsx(Heading, { level: 4, className: "mb-1", children: tConfirm("unsavedChangesTitle") }), _jsx(Text, { className: UI_SIDE_DRAWER.warnText, children: tConfirm("unsavedChangesDescription") })] })] }), _jsxs("div", { className: UI_SIDE_DRAWER.warnActions, "data-section": "sidedrawer-div-605", children: [_jsx(Button, { variant: "outline", onClick: cancelClose, size: "sm", children: tActions("keepEditing") }), _jsx(Button, { variant: "danger", onClick: confirmClose, size: "sm", children: tActions("discardChanges") })] })] })] }))] })) }));
 }

package/dist/ui/components/SideModal.js

@@ -4,6 +4,7 @@ import { useEffect, useRef } from "react";
 import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 import { Button, Div, Heading } from "..";
 import { SPRING_SNAPPY } from "../../tokens/motion";
+import { useHandMode } from "../../_internal/client/hand-mode";
 /**
  * SideModal — slides in from the right (or left) on desktop (60 vw),
  * full-screen drawer on mobile (< sm breakpoint).
@@ -14,7 +15,9 @@ import { SPRING_SNAPPY } from "../../tokens/motion";
  *  - backdrop click closes panel
  *  - role="dialog" + aria-modal + aria-labelledby
  */
-export function SideModal({ isOpen, onClose, title, side = "right", children, className = "", }) {
+export function SideModal({ isOpen, onClose, title, side, children, className = "", }) {
+    const { hand } = useHandMode();
+    const resolvedSide = side ?? hand;
     const panelRef = useRef(null);
     const titleId = useRef(`side-modal-title-${Math.random().toString(36).slice(2, 8)}`);
     // Escape key handler
@@ -53,12 +56,12 @@ export function SideModal({ isOpen, onClose, title, side = "right", children, cl
         };
     }, [isOpen]);
     const reduced = useReducedMotion();
-    const slideX = side === "left" ? "-100%" : "100%";
+    const slideX = resolvedSide === "left" ? "-100%" : "100%";
     return (_jsx(AnimatePresence, { children: isOpen && (_jsxs(Div, { className: "appkit-side-modal", "aria-hidden": !isOpen, children: [_jsx(motion.div, { className: "appkit-side-modal__backdrop", onClick: onClose, "aria-hidden": "true", initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }), _jsxs(motion.div, { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId.current : undefined, className: [
                         "appkit-side-modal__panel",
-                        `appkit-side-modal__panel--${side}`,
+                        `appkit-side-modal__panel--${resolvedSide}`,
                         className,
                     ]
                         .filter(Boolean)
-                        .join(" "), initial: reduced ? false : { x: slideX }, animate: { x: 0 }, exit: { x: slideX }, transition: SPRING_SNAPPY, children: [title && (_jsxs(Div, { className: "appkit-side-modal__header", children: [_jsx(Heading, { level: 2, id: titleId.current, className: "text-base font-semibold text-[var(--appkit-color-text)] dark:text-white truncate", children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close panel", className: "ml-2 flex-shrink-0", children: "\u2715" })] })), _jsx(Div, { className: "appkit-side-modal__body", children: children })] })] })) }));
+                        .join(" "), initial: reduced ? false : { x: slideX }, animate: { x: 0 }, exit: { x: slideX }, transition: SPRING_SNAPPY, children: [title && (_jsxs(Div, { className: hand === "left" ? "appkit-side-modal__header flex-row-reverse" : "appkit-side-modal__header", children: [_jsx(Heading, { level: 2, id: titleId.current, className: "text-base font-semibold text-[var(--appkit-color-text)] dark:text-white truncate", children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close panel", className: hand === "left" ? "mr-2 flex-shrink-0" : "ml-2 flex-shrink-0", children: "\u2715" })] })), _jsx(Div, { className: "appkit-side-modal__body", children: children })] })] })) }));
 }

package/dist/ui/index.d.ts

@@ -175,6 +175,7 @@ export type { SurfaceKey, PaddingKey, RoundedKey, BorderKey, ShadowKey, SurfaceP
 export { SURFACE_MAP, PADDING_MAP, ROUNDED_MAP, BORDER_MAP, SHADOW_MAP, buildSurfaceClasses, } from "./components/surface-tokens";
 export type { GapKey, ContainerSize, GridCols, ViewPortal, ContainerProps, StackProps, RowProps, GridProps, } from "./components/Layout";
 export { Container, Stack, Row, Grid, GRID_MAP } from "./components/Layout";
+export { HandModeRow } from "./components/HandModeRow";
 export { classNames, mergeTailwindClasses } from "./style.helper";
 export type { SideModalProps } from "./components/SideModal";
 export { SideModal } from "./components/SideModal";

package/dist/ui/index.js

@@ -90,6 +90,7 @@ export { DataTable } from "./DataTable";
 export { DEFAULT_TABLE_CONFIG, DEFAULT_PAGINATION_CONFIG, DEFAULT_STICKY_CONFIG, mergeTableConfig, } from "../contracts";
 export { SURFACE_MAP, PADDING_MAP, ROUNDED_MAP, BORDER_MAP, SHADOW_MAP, buildSurfaceClasses, } from "./components/surface-tokens";
 export { Container, Stack, Row, Grid, GRID_MAP } from "./components/Layout";
+export { HandModeRow } from "./components/HandModeRow";
 // --- UI Helpers ---------------------------------------------------------------
 export { classNames, mergeTailwindClasses } from "./style.helper";
 export { SideModal } from "./components/SideModal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.9.3",
+  "version": "4.9.5",
   "license": "MIT",
   "publishConfig": {
     "access": "public"