@appcorp/stellar-solutions-modules 0.1.33 → 0.1.35

package/components/ui/drawer.js

@@ -0,0 +1,115 @@
+"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.Drawer = Drawer;
+exports.DrawerPortal = DrawerPortal;
+exports.DrawerOverlay = DrawerOverlay;
+exports.DrawerTrigger = DrawerTrigger;
+exports.DrawerClose = DrawerClose;
+exports.DrawerContent = DrawerContent;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerDescription = DrawerDescription;
+var React = __importStar(require("react"));
+var vaul_1 = require("vaul");
+var utils_1 = require("@/lib/utils");
+function Drawer(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(vaul_1.Drawer.Root, __assign({ "data-slot": "drawer" }, props));
+}
+function DrawerTrigger(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(vaul_1.Drawer.Trigger, __assign({ "data-slot": "drawer-trigger" }, props));
+}
+function DrawerPortal(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(vaul_1.Drawer.Portal, __assign({ "data-slot": "drawer-portal" }, props));
+}
+function DrawerClose(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(vaul_1.Drawer.Close, __assign({ "data-slot": "drawer-close" }, props));
+}
+function DrawerOverlay(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement(vaul_1.Drawer.Overlay, __assign({ "data-slot": "drawer-overlay", className: (0, utils_1.cn)("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className) }, props)));
+}
+function DrawerContent(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    return (React.createElement(DrawerPortal, { "data-slot": "drawer-portal" },
+        React.createElement(DrawerOverlay, null),
+        React.createElement(vaul_1.Drawer.Content, __assign({ "data-slot": "drawer-content", className: (0, utils_1.cn)("group/drawer-content bg-background fixed z-50 flex h-auto flex-col", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm", className) }, props),
+            React.createElement("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+            children)));
+}
+function DrawerHeader(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "drawer-header", className: (0, utils_1.cn)("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left", className) }, props)));
+}
+function DrawerFooter(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "drawer-footer", className: (0, utils_1.cn)("mt-auto flex flex-col gap-2 p-4", className) }, props)));
+}
+function DrawerTitle(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement(vaul_1.Drawer.Title, __assign({ "data-slot": "drawer-title", className: (0, utils_1.cn)("text-foreground font-semibold", className) }, props)));
+}
+function DrawerDescription(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement(vaul_1.Drawer.Description, __assign({ "data-slot": "drawer-description", className: (0, utils_1.cn)("text-muted-foreground text-sm", className) }, props)));
+}

package/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React.JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/components/ui/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/ui/enhanced-table-footer-action.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 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;
+    /** Custom aria labels for accessibility */
+    ariaLabels?: {
+        next?: string;
+        previous?: string;
+    };
+}
+export declare const EnhancedTableFooterAction: FC<EnhancedTableFooterActionProps>;
+export {};

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

@@ -0,0 +1,117 @@
+"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 next_intl_1 = require("next-intl");
+var button_1 = require("./button");
+var use_rtl_1 = require("@/hooks/use-rtl");
+var EnhancedTableFooterAction = function (_a) {
+    var handleNextOnClick = _a.handleNextOnClick, handlePreviousOnClick = _a.handlePreviousOnClick, isNextDisabled = _a.isNextDisabled, isPreviousDisabled = _a.isPreviousDisabled, loading = _a.loading, ariaLabels = _a.ariaLabels;
+    var t = (0, next_intl_1.useTranslations)();
+    var isRTL = (0, use_rtl_1.useRTL)();
+    // Get translated aria labels with fallbacks
+    var previousLabel = (ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.previous) || t("common.previousPage") || "Previous page";
+    var nextLabel = (ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.next) || t("common.nextPage") || "Next page";
+    // 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": previousLabel, title: previousLabel, 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": nextLabel, title: nextLabel, 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/ui/enhanced-table-footer-page.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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;
+    /** Optional translation map for custom text overrides */
+    translationMap?: {
+        pageLabel?: string;
+        ofLabel?: string;
+        loadingLabel?: string;
+    };
+    /** Optional CSS classes for custom styling */
+    className?: string;
+}
+export declare const EnhancedTableFooterPage: FC<EnhancedTableFooterPageProps>;
+export {};

package/components/ui/enhanced-table-footer-page.js

@@ -0,0 +1,140 @@
+"use strict";
+/**
+ * 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
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnhancedTableFooterPage = void 0;
+var react_1 = __importDefault(require("react"));
+var next_intl_1 = require("next-intl");
+var use_rtl_1 = require("@/hooks/use-rtl");
+var EnhancedTableFooterPage = function (_a) {
+    var currentPage = _a.currentPage, loading = _a.loading, totalPages = _a.totalPages, translationMap = _a.translationMap, _b = _a.className, className = _b === void 0 ? "" : _b;
+    var t = (0, next_intl_1.useTranslations)();
+    var isRTL = (0, use_rtl_1.useRTL)();
+    // Get translated text with fallbacks
+    var pageLabel = (translationMap === null || translationMap === void 0 ? void 0 : translationMap.pageLabel) || t("common.page") || "Page";
+    var ofLabel = (translationMap === null || translationMap === void 0 ? void 0 : translationMap.ofLabel) || t("common.of") || "of";
+    var loadingLabel = (translationMap === null || translationMap === void 0 ? void 0 : translationMap.loadingLabel) || t("common.loading") || "Loading";
+    return (react_1.default.createElement("div", { className: "flex items-center gap-2 ".concat(isRTL ? "rtl" : "ltr", " ").concat(className), dir: isRTL ? "rtl" : "ltr", role: "status", "aria-live": "polite", "aria-label": "".concat(pageLabel, " ").concat(currentPage, " ").concat(ofLabel, " ").concat(totalPages) },
+        react_1.default.createElement("span", { className: "text-sm text-muted-foreground" }, isRTL ? (
+        // RTL layout: Numbers read right-to-left but maintain logical order
+        react_1.default.createElement("span", { className: "inline-flex items-center gap-1" },
+            react_1.default.createElement("span", null, totalPages),
+            react_1.default.createElement("span", null, ofLabel),
+            react_1.default.createElement("span", null, currentPage),
+            react_1.default.createElement("span", null, pageLabel))) : (
+        // LTR layout: "Page currentPage of totalPages"
+        react_1.default.createElement("span", { className: "inline-flex items-center gap-1" },
+            react_1.default.createElement("span", null, pageLabel),
+            react_1.default.createElement("span", null, currentPage),
+            react_1.default.createElement("span", null, ofLabel),
+            react_1.default.createElement("span", null, totalPages)))),
+        loading && (react_1.default.createElement("div", { className: "flex items-center gap-2 ".concat(isRTL ? "order-first" : "order-last"), "aria-label": loadingLabel },
+            react_1.default.createElement("div", { className: "w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin", role: "progressbar", "aria-label": loadingLabel })))));
+};
+exports.EnhancedTableFooterPage = EnhancedTableFooterPage;
+// ============================================================================
+// USAGE EXAMPLES
+// ============================================================================
+/*
+Example 1: Basic usage with automatic i18n
+<EnhancedTableFooterPage
+  currentPage={2}
+  totalPages={10}
+  loading={false}
+/>
+
+Example 2: With custom translations
+<EnhancedTableFooterPage
+  currentPage={1}
+  totalPages={5}
+  loading={true}
+  translationMap={{
+    pageLabel: "صفحہ",  // Urdu for "Page"
+    ofLabel: "کا",      // Urdu for "of"
+    loadingLabel: "لوڈ ہو رہا ہے"  // Urdu for "Loading"
+  }}
+/>
+
+Example 3: With custom styling
+<EnhancedTableFooterPage
+  currentPage={3}
+  totalPages={7}
+  loading={false}
+  className="bg-gray-50 p-2 rounded-md"
+/>
+
+Translation Keys (Already Added to messages files):
+English (en.json):
+{
+  "common": {
+    "page": "Page",
+    "of": "of",
+    "loading": "Loading"
+  }
+}
+
+Urdu (ur.json):
+{
+  "common": {
+    "page": "صفحہ",
+    "of": "کا",
+    "loading": "لوڈ ہو رہا ہے"
+  }
+}
+
+RTL Layout Features:
+- Automatic text direction detection and application
+- Proper order of page information in RTL languages
+- RTL-aware loading indicator positioning
+- Accessibility attributes for screen readers
+- Direction-specific CSS classes and DOM attributes
+*/
+// ============================================================================
+// COMPONENT ENHANCEMENTS SUMMARY
+// ============================================================================
+/*
+Enhancements Applied:
+
+1. **Internationalization (i18n)**
+   - Full translation support using next-intl
+   - Fallback text for missing translations
+   - Custom translation override capability
+
+2. **RTL/LTR Layout Support**
+   - Automatic layout detection using useRTL hook
+   - Proper text ordering for RTL languages
+   - Direction-aware CSS classes and attributes
+   - RTL-appropriate visual element positioning
+
+3. **Accessibility Improvements**
+   - ARIA labels for screen readers
+   - Role attributes for semantic meaning
+   - Live region announcements for dynamic content
+   - Proper labeling of interactive elements
+
+4. **Developer Experience**
+   - Comprehensive JSDoc documentation
+   - Usage examples and patterns
+   - TypeScript interface improvements
+   - Flexible customization options
+
+5. **Code Quality**
+   - Clean, readable component structure
+   - Consistent naming conventions
+   - Performance-optimized rendering
+   - Maintainable and extensible design
+*/

package/components/ui/enhanced-table-footer-pagination.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Enhanced Table Footer Pagination Component
+ *
+ * Displays rows per page selector with internationalization and RTL/LTR support.
+ * Automatically adapts text direction and layout based on locale.
+ *
+ * Features:
+ * - Full i18n support with fallback text
+ * - RTL/LTR layout adaptation
+ * - Loading state handling
+ * - Accessibility attributes
+ * - Custom translation overrides
+ * - Responsive design
+ */
+import { FC } from "react";
+export interface PageLimitOption {
+    option: string;
+}
+interface EnhancedTableFooterPageProps {
+    /** Handler for page limit selection changes */
+    handleOnSelect: (node: string, value: object) => void;
+    /** Array of page limit options to display */
+    listOptions: PageLimitOption[];
+    /** Loading state indicator */
+    loading: boolean;
+    /** Node key for the select handler */
+    nodeSelectKey?: string;
+    /** Current page limit value */
+    pageLimit: number;
+    /** Total number of pages (unused but kept for compatibility) */
+    totalPages: number;
+    /** Optional translation override for the label text */
+    labelText?: string;
+    /** Optional CSS classes for custom styling */
+    className?: string;
+}
+export declare const EnhancedTableFooterPagination: FC<EnhancedTableFooterPageProps>;
+export {};