@appcorp/shadcn 1.0.10

package/components/dropdown-menu.js

@@ -0,0 +1,148 @@
+"use client";
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuPortal = DropdownMenuPortal;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
+exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
+exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuShortcut = DropdownMenuShortcut;
+exports.DropdownMenuSub = DropdownMenuSub;
+exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
+exports.DropdownMenuSubContent = DropdownMenuSubContent;
+var React = __importStar(require("react"));
+var DropdownMenuPrimitive = __importStar(require("@radix-ui/react-dropdown-menu"));
+var lucide_react_1 = require("lucide-react");
+var utils_1 = require("../lib/utils");
+function DropdownMenu(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DropdownMenuPrimitive.Root, __assign({ "data-slot": "dropdown-menu" }, props));
+}
+function DropdownMenuPortal(_a) {
+    var props = __rest(_a, []);
+    return (React.createElement(DropdownMenuPrimitive.Portal, __assign({ "data-slot": "dropdown-menu-portal" }, props)));
+}
+function DropdownMenuTrigger(_a) {
+    var props = __rest(_a, []);
+    return (React.createElement(DropdownMenuPrimitive.Trigger, __assign({ "data-slot": "dropdown-menu-trigger" }, props)));
+}
+function DropdownMenuContent(_a) {
+    var className = _a.className, _b = _a.sideOffset, sideOffset = _b === void 0 ? 4 : _b, props = __rest(_a, ["className", "sideOffset"]);
+    return (React.createElement(DropdownMenuPrimitive.Portal, null,
+        React.createElement(DropdownMenuPrimitive.Content, __assign({ "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: (0, utils_1.cn)("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", className) }, props))));
+}
+function DropdownMenuGroup(_a) {
+    var props = __rest(_a, []);
+    return (React.createElement(DropdownMenuPrimitive.Group, __assign({ "data-slot": "dropdown-menu-group" }, props)));
+}
+function DropdownMenuItem(_a) {
+    var className = _a.className, inset = _a.inset, _b = _a.variant, variant = _b === void 0 ? "default" : _b, props = __rest(_a, ["className", "inset", "variant"]);
+    return (React.createElement(DropdownMenuPrimitive.Item, __assign({ "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: (0, utils_1.cn)("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props)));
+}
+function DropdownMenuCheckboxItem(_a) {
+    var className = _a.className, children = _a.children, checked = _a.checked, props = __rest(_a, ["className", "children", "checked"]);
+    return (React.createElement(DropdownMenuPrimitive.CheckboxItem, __assign({ "data-slot": "dropdown-menu-checkbox-item", className: (0, utils_1.cn)("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked }, props),
+        React.createElement("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center" },
+            React.createElement(DropdownMenuPrimitive.ItemIndicator, null,
+                React.createElement(lucide_react_1.CheckIcon, { className: "size-4" }))),
+        children));
+}
+function DropdownMenuRadioGroup(_a) {
+    var props = __rest(_a, []);
+    return (React.createElement(DropdownMenuPrimitive.RadioGroup, __assign({ "data-slot": "dropdown-menu-radio-group" }, props)));
+}
+function DropdownMenuRadioItem(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    return (React.createElement(DropdownMenuPrimitive.RadioItem, __assign({ "data-slot": "dropdown-menu-radio-item", className: (0, utils_1.cn)("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props),
+        React.createElement("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center" },
+            React.createElement(DropdownMenuPrimitive.ItemIndicator, null,
+                React.createElement(lucide_react_1.CircleIcon, { className: "size-2 fill-current" }))),
+        children));
+}
+function DropdownMenuLabel(_a) {
+    var className = _a.className, inset = _a.inset, props = __rest(_a, ["className", "inset"]);
+    return (React.createElement(DropdownMenuPrimitive.Label, __assign({ "data-slot": "dropdown-menu-label", "data-inset": inset, className: (0, utils_1.cn)("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className) }, props)));
+}
+function DropdownMenuSeparator(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement(DropdownMenuPrimitive.Separator, __assign({ "data-slot": "dropdown-menu-separator", className: (0, utils_1.cn)("bg-border -mx-1 my-1 h-px", className) }, props)));
+}
+function DropdownMenuShortcut(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("span", __assign({ "data-slot": "dropdown-menu-shortcut", className: (0, utils_1.cn)("text-muted-foreground ml-auto text-xs tracking-widest", className) }, props)));
+}
+function DropdownMenuSub(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DropdownMenuPrimitive.Sub, __assign({ "data-slot": "dropdown-menu-sub" }, props));
+}
+function DropdownMenuSubTrigger(_a) {
+    var className = _a.className, inset = _a.inset, children = _a.children, props = __rest(_a, ["className", "inset", "children"]);
+    return (React.createElement(DropdownMenuPrimitive.SubTrigger, __assign({ "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: (0, utils_1.cn)("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", className) }, props),
+        children,
+        React.createElement(lucide_react_1.ChevronRightIcon, { className: "ml-auto size-4" })));
+}
+function DropdownMenuSubContent(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement(DropdownMenuPrimitive.SubContent, __assign({ "data-slot": "dropdown-menu-sub-content", className: (0, utils_1.cn)("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", className) }, props)));
+}

package/components/enhanced-dropzone.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import type { DropzoneOptions } from "react-dropzone";
+export type EnhancedDropzoneProps = {
+    id?: string;
+    className?: string;
+    label?: string;
+    info?: string;
+    error?: string;
+    accept?: DropzoneOptions["accept"] | string[];
+    maxFiles?: number;
+    maxSize?: number;
+    minSize?: number;
+    disabled?: boolean;
+    /** Remote image URLs to display as previews */
+    value?: string[];
+    /** Called when files are selected or removed */
+    onChange?: (files: File[]) => void;
+    /** Called when a remote URL is removed */
+    onRemoveRemote?: (url: string) => void;
+};
+export declare const EnhancedDropzone: React.FC<EnhancedDropzoneProps>;

package/components/enhanced-dropzone.js

@@ -0,0 +1,187 @@
+"use client";
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnhancedDropzone = void 0;
+var react_1 = __importStar(require("react"));
+var react_dropzone_1 = require("react-dropzone");
+var utils_1 = require("../lib/utils");
+var carousel_1 = require("./carousel");
+var button_1 = require("./button");
+var lucide_react_1 = require("lucide-react");
+var EnhancedDropzone = function (_a) {
+    var id = _a.id, label = _a.label, info = _a.info, error = _a.error, accept = _a.accept, _b = _a.maxFiles, maxFiles = _b === void 0 ? 10 : _b, maxSize = _a.maxSize, minSize = _a.minSize, disabled = _a.disabled, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, onRemoveRemote = _a.onRemoveRemote, className = _a.className;
+    // Local files selected by user
+    var _d = (0, react_1.useState)([]), localFiles = _d[0], setLocalFiles = _d[1];
+    // Track object URLs created for local files
+    var localPreviewsRef = (0, react_1.useRef)(new Map());
+    // Create object URLs for local files synchronously to avoid loading state
+    var createObjectURLs = (0, react_1.useCallback)(function () {
+        var map = localPreviewsRef.current;
+        // Create URLs for new files
+        localFiles.forEach(function (file) {
+            if (!map.has(file)) {
+                try {
+                    var url = URL.createObjectURL(file);
+                    map.set(file, url);
+                }
+                catch (error) {
+                    console.error("Failed to create object URL:", error);
+                }
+            }
+        });
+        // Clean up URLs for removed files
+        var currentFiles = new Set(localFiles);
+        Array.from(map.entries()).forEach(function (_a) {
+            var file = _a[0], url = _a[1];
+            if (!currentFiles.has(file)) {
+                URL.revokeObjectURL(url);
+                map.delete(file);
+            }
+        });
+    }, [localFiles]);
+    // Run synchronously on every render to avoid "loading" flash
+    createObjectURLs();
+    // Cleanup on unmount
+    (0, react_1.useEffect)(function () {
+        var map = localPreviewsRef.current;
+        return function () {
+            Array.from(map.values()).forEach(function (url) {
+                URL.revokeObjectURL(url);
+            });
+            map.clear();
+        };
+    }, []);
+    var dropzoneOptions = {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        accept: (Array.isArray(accept) ? undefined : accept) || undefined,
+        maxFiles: maxFiles,
+        maxSize: maxSize,
+        minSize: minSize,
+        disabled: disabled,
+        onDrop: (0, react_1.useCallback)(function (acceptedFiles) {
+            setLocalFiles(function (prev) {
+                var combined = __spreadArray(__spreadArray([], prev, true), acceptedFiles, true);
+                var limited = maxFiles ? combined.slice(0, maxFiles) : combined;
+                onChange === null || onChange === void 0 ? void 0 : onChange(limited);
+                return limited;
+            });
+        }, [maxFiles, onChange]),
+    };
+    var _e = (0, react_dropzone_1.useDropzone)(dropzoneOptions), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps, isDragActive = _e.isDragActive;
+    // Remove remote URL
+    var handleRemoveRemote = (0, react_1.useCallback)(function (url) {
+        onRemoveRemote === null || onRemoveRemote === void 0 ? void 0 : onRemoveRemote(url);
+    }, [onRemoveRemote]);
+    // Remove local file
+    var handleRemoveLocal = (0, react_1.useCallback)(function (index) {
+        setLocalFiles(function (prev) {
+            var updated = prev.filter(function (_, i) { return i !== index; });
+            onChange === null || onChange === void 0 ? void 0 : onChange(updated);
+            return updated;
+        });
+    }, [onChange]);
+    // Get all preview URLs (remote + local)
+    var allPreviews = __spreadArray(__spreadArray([], value.map(function (url) { return ({ type: "remote", url: url, index: 0 }); }), true), localFiles.map(function (file, index) { return ({
+        type: "local",
+        url: localPreviewsRef.current.get(file) || "",
+        index: index,
+    }); }), true);
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("w-full", className) },
+        label && (react_1.default.createElement("label", { className: "mb-2 block text-sm font-medium" }, label)),
+        react_1.default.createElement("div", __assign({}, getRootProps(), { className: (0, utils_1.cn)("relative w-full rounded-md border border-dashed p-6 text-center min-h-[280px] flex items-center justify-center", isDragActive && "ring-2 ring-ring ring-offset-2", disabled && "opacity-60 pointer-events-none") }),
+            react_1.default.createElement("input", __assign({}, getInputProps(), { id: id })),
+            allPreviews.length > 0 ? (react_1.default.createElement("div", { className: "flex flex-col items-center w-full" },
+                react_1.default.createElement("div", { className: "relative w-full max-w-md" },
+                    react_1.default.createElement(carousel_1.Carousel, { className: "w-full" },
+                        react_1.default.createElement(carousel_1.CarouselPrevious, { type: "button", onClick: function (e) { return e.stopPropagation(); }, onPointerDown: function (e) { return e.stopPropagation(); }, onMouseDown: function (e) { return e.stopPropagation(); } }),
+                        react_1.default.createElement(carousel_1.CarouselNext, { type: "button", onClick: function (e) { return e.stopPropagation(); }, onPointerDown: function (e) { return e.stopPropagation(); }, onMouseDown: function (e) { return e.stopPropagation(); } }),
+                        react_1.default.createElement(carousel_1.CarouselContent, { className: "ml-0" }, allPreviews.map(function (preview, idx) { return (react_1.default.createElement(carousel_1.CarouselItem, { key: "".concat(preview.type, "-").concat(preview.url, "-").concat(idx), className: "pl-4" },
+                            react_1.default.createElement("div", { className: "relative aspect-square w-full max-w-xs mx-auto" }, preview.url ? (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement("img", { src: preview.url, alt: "Preview ".concat(idx + 1), className: "h-full w-full rounded-lg object-cover", onClick: function (e) { return e.stopPropagation(); } }),
+                                react_1.default.createElement(button_1.Button, { type: "button", size: "icon", variant: "destructive", onClick: function (e) {
+                                        e.stopPropagation();
+                                        if (preview.type === "remote") {
+                                            handleRemoveRemote(preview.url);
+                                        }
+                                        else {
+                                            handleRemoveLocal(preview.index);
+                                        }
+                                    }, className: "absolute right-2 top-2 h-8 w-8 rounded-full", "aria-label": "Remove image" },
+                                    react_1.default.createElement(lucide_react_1.XIcon, { className: "h-4 w-4" })))) : (react_1.default.createElement("div", { className: "flex h-full w-full items-center justify-center rounded-lg bg-muted text-muted-foreground" },
+                                react_1.default.createElement("span", { className: "text-sm" }, "Loading...")))))); })))),
+                react_1.default.createElement("p", { className: "mt-4 text-sm font-medium text-muted-foreground" },
+                    allPreviews.length,
+                    " image",
+                    allPreviews.length !== 1 ? "s" : "",
+                    " ",
+                    "selected"))) : (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center gap-2" },
+                react_1.default.createElement("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg bg-muted text-muted-foreground" },
+                    react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-image" },
+                        react_1.default.createElement("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+                        react_1.default.createElement("circle", { cx: "9", cy: "9", r: "2" }),
+                        react_1.default.createElement("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }))),
+                react_1.default.createElement("div", { className: "space-y-1 text-center" },
+                    react_1.default.createElement("p", { className: "font-medium text-sm" },
+                        "Upload ",
+                        maxFiles === 1 ? "an image" : "images"),
+                    react_1.default.createElement("p", { className: "text-muted-foreground text-xs" }, "Drag and drop or click to browse"),
+                    maxFiles > 1 && (react_1.default.createElement("p", { className: "text-muted-foreground text-xs" },
+                        "Up to ",
+                        maxFiles,
+                        " files")))))),
+        (error || info) && (react_1.default.createElement("div", { className: "mt-2" }, error ? (react_1.default.createElement("p", { className: "text-xs text-destructive" }, error)) : info ? (react_1.default.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400" }, info)) : null))));
+};
+exports.EnhancedDropzone = EnhancedDropzone;

package/components/enhanced-table-footer-action.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Enhanced Table Footer Action Component
+ *
+ * Navigation buttons for table pagination with RTL/LTR support.
+ * Automatically adjusts arrow directions and button order based on locale.
+ *
+ * Features:
+ * - RTL/LTR arrow direction adjustment
+ * - Button order reversal for RTL layouts
+ * - Accessibility attributes
+ * - Internationalized aria labels
+ * - Disabled state handling
+ * - Loading state support
+ */
+import { FC } from "react";
+interface EnhancedTableFooterActionProps {
+    /** Handler for next page navigation */
+    handleNextOnClick: () => void;
+    /** Handler for previous page navigation */
+    handlePreviousOnClick: () => void;
+    /** Whether next button should be disabled */
+    isNextDisabled?: boolean;
+    /** Whether previous button should be disabled */
+    isPreviousDisabled?: boolean;
+    /** Loading state indicator */
+    loading?: boolean;
+    /** RTL layout flag */
+    isRTL?: boolean;
+    /** Label for previous page button */
+    previousPageLabel?: string;
+    /** Label for next page button */
+    nextPageLabel?: string;
+}
+export declare const EnhancedTableFooterAction: FC<EnhancedTableFooterActionProps>;
+export {};

package/components/enhanced-table-footer-action.js

@@ -0,0 +1,110 @@
+"use strict";
+/**
+ * Enhanced Table Footer Action Component
+ *
+ * Navigation buttons for table pagination with RTL/LTR support.
+ * Automatically adjusts arrow directions and button order based on locale.
+ *
+ * Features:
+ * - RTL/LTR arrow direction adjustment
+ * - Button order reversal for RTL layouts
+ * - Accessibility attributes
+ * - Internationalized aria labels
+ * - Disabled state handling
+ * - Loading state support
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnhancedTableFooterAction = void 0;
+var react_1 = __importDefault(require("react"));
+var lucide_react_1 = require("lucide-react");
+var button_1 = require("./button");
+var EnhancedTableFooterAction = function (_a) {
+    var handleNextOnClick = _a.handleNextOnClick, handlePreviousOnClick = _a.handlePreviousOnClick, isNextDisabled = _a.isNextDisabled, isPreviousDisabled = _a.isPreviousDisabled, _b = _a.isRTL, isRTL = _b === void 0 ? false : _b, loading = _a.loading, _c = _a.nextPageLabel, nextPageLabel = _c === void 0 ? "Next page" : _c, _d = _a.previousPageLabel, previousPageLabel = _d === void 0 ? "Previous page" : _d;
+    // In RTL, arrows should be swapped:
+    // Previous should show → (ChevronRight) as it goes to the right in RTL reading order
+    // Next should show ← (ChevronLeft) as it goes to the left in RTL reading order
+    var PreviousIcon = isRTL ? lucide_react_1.ChevronRight : lucide_react_1.ChevronLeft;
+    var NextIcon = isRTL ? lucide_react_1.ChevronLeft : lucide_react_1.ChevronRight;
+    return (react_1.default.createElement("div", { className: "flex gap-1 ".concat(isRTL ? "flex-row-reverse" : "") },
+        react_1.default.createElement(button_1.Button, { variant: "outline", size: "icon", onClick: handlePreviousOnClick, disabled: isPreviousDisabled || loading, "aria-label": previousPageLabel, title: previousPageLabel, className: "".concat(isRTL ? "rotate-180" : "") },
+            react_1.default.createElement(PreviousIcon, { className: "h-4 w-4" })),
+        react_1.default.createElement(button_1.Button, { variant: "outline", size: "icon", onClick: handleNextOnClick, disabled: isNextDisabled || loading, "aria-label": nextPageLabel, title: nextPageLabel, className: "".concat(isRTL ? "rotate-180" : "") },
+            react_1.default.createElement(NextIcon, { className: "h-4 w-4" }))));
+};
+exports.EnhancedTableFooterAction = EnhancedTableFooterAction;
+// ============================================================================
+// USAGE EXAMPLES
+// ============================================================================
+/*
+Example 1: Basic usage with automatic i18n and RTL support
+<EnhancedTableFooterAction
+  handlePreviousOnClick={() => setCurrentPage(prev => prev - 1)}
+  handleNextOnClick={() => setCurrentPage(prev => prev + 1)}
+  isPreviousDisabled={currentPage === 1}
+  isNextDisabled={currentPage === totalPages}
+  loading={false}
+/>
+
+Example 2: With custom aria labels
+<EnhancedTableFooterAction
+  handlePreviousOnClick={handlePrevious}
+  handleNextOnClick={handleNext}
+  isPreviousDisabled={isPreviousDisabled}
+  isNextDisabled={isNextDisabled}
+  loading={isLoading}
+  ariaLabels={{
+    previous: "Go to previous page",
+    next: "Go to next page"
+  }}
+/>
+
+Example 3: Loading state
+<EnhancedTableFooterAction
+  handlePreviousOnClick={handlePrevious}
+  handleNextOnClick={handleNext}
+  loading={true}  // Both buttons will be disabled
+/>
+
+RTL Behavior:
+- In LTR languages (English): Previous (←) | Next (→)
+- In RTL languages (Arabic/Urdu): Previous (→) | Next (←)
+- Button order is reversed in RTL: [Next] [Previous]
+- Arrows automatically adjust to reading direction
+*/
+// ============================================================================
+// COMPONENT ENHANCEMENTS SUMMARY
+// ============================================================================
+/*
+Enhancements Applied:
+
+1. **RTL/LTR Layout Support**
+   - Automatic arrow direction adjustment based on locale
+   - Button order reversal for RTL layouts (flex-row-reverse)
+   - Direction-aware icon selection (ChevronLeft/Right swap)
+   - Proper navigation flow for both reading directions
+
+2. **Internationalization (i18n)**
+   - Translation support using next-intl
+   - Fallback aria labels for accessibility
+   - Custom aria label override capability
+   - Tooltip support with title attributes
+
+3. **Accessibility Improvements**
+   - ARIA labels for screen readers
+   - Title attributes for tooltips
+   - Proper button semantics
+   - Keyboard navigation support
+
+4. **Visual Consistency**
+   - Maintains button spacing and alignment
+   - Consistent with existing table footer components
+   - Proper disabled state handling
+   - Loading state support
+
+Translation Keys Added:
+- common.previousPage: "Previous page" / "پچھلا صفحہ"
+- common.nextPage: "Next page" / "اگلا صفحہ"
+*/

package/components/enhanced-table-footer-page.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Enhanced Table Footer Page Component
+ *
+ * Displays pagination information with internationalization and RTL/LTR support.
+ * Automatically adapts text direction and order based on locale.
+ *
+ * Features:
+ * - Full i18n support with fallback text
+ * - RTL/LTR layout adaptation
+ * - Loading state indicator
+ * - Accessibility attributes
+ * - Custom translation overrides
+ */
+import { FC } from "react";
+interface EnhancedTableFooterPageProps {
+    /** Current active page number */
+    currentPage: number;
+    /** Loading state indicator */
+    loading: boolean;
+    /** Total number of pages available */
+    totalPages: number;
+    /** RTL layout flag */
+    isRTL?: boolean;
+    /** Label for "Page" text */
+    pageLabel?: string;
+    /** Label for "of" text */
+    ofLabel?: string;
+    /** Label for loading state */
+    loadingLabel?: string;
+    /** Optional CSS classes for custom styling */
+    className?: string;
+}
+export declare const EnhancedTableFooterPage: FC<EnhancedTableFooterPageProps>;
+export {};