@appcorp/shadcn 1.1.25 → 1.1.28

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

@@ -24,12 +24,7 @@ var EnhancedTableHeaderAction = function (_a) {
         return (react_1.default.createElement("div", { key: action.id || action.key || index, className: "relative" },
             react_1.default.createElement(button_1.Button, { variant: action.variant || "default", "data-testid": testIdActionPrefix
                     ? "".concat(testIdActionPrefix, "-").concat(index)
-                    : undefined, onClick: function () {
-                    if (action.onClick)
-                        action.onClick();
-                    if (action.handleOnClick)
-                        action.handleOnClick();
-                } }, action.label),
+                    : undefined, onClick: function () { var _a; return (_a = action.handleOnClick) === null || _a === void 0 ? void 0 : _a.call(action, undefined); } }, action.label),
             showFilterIndicators && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("div", { className: "absolute -top-2 -left-2 group" },
                     react_1.default.createElement(badge_1.Badge, { variant: "secondary", className: (0, utils_1.cn)("h-5 w-5 flex items-center justify-center p-0 text-xs rounded-full transition-all relative", onClearFilters && "cursor-pointer"), "data-testid": testIdFilterBadge, onClick: onClearFilters

package/components/enhanced-table.d.ts

@@ -26,9 +26,8 @@ export interface RowAction {
     enabled?: boolean;
     order?: number;
     variant?: "default" | "destructive";
-    onClick?: (row: TableRow) => void;
-    handleOnClick?: (row: TableRow) => void;
-    handleAction?: (id: string) => void;
+    /** Preferred handler for row and header actions. Receives the full `row` when invoked from a row. */
+    handleOnClick?: (row?: TableRow) => void;
 }
 export interface HeaderAction {
     id?: string;
@@ -37,8 +36,8 @@ export interface HeaderAction {
     enabled?: boolean;
     order?: number;
     variant?: "default" | "outline" | "secondary";
-    onClick?: () => void;
-    handleOnClick?: () => void;
+    /** Preferred handler — will receive a `row` when invoked from row actions. */
+    handleOnClick?: (row?: TableRow) => void;
 }
 export interface PageLimitOption {
     option: string;

package/components/enhanced-table.js

@@ -185,14 +185,7 @@ var EnhancedTable = function (_a) {
                     .map(function (action, index) { return (react_1.default.createElement(dropdown_menu_1.DropdownMenuItem, { key: action.id || action.key || index, "data-testid": _testIdRowActionPrefix
                         ? "".concat(_testIdRowActionPrefix, "-").concat(rowIndex, "-").concat(index)
                         : undefined, className: (0, utils_1.cn)(action.variant === "destructive" &&
-                        "text-destructive focus:text-destructive"), onClick: function () {
-                        if (action.onClick)
-                            action.onClick(row);
-                        if (action.handleOnClick)
-                            action.handleOnClick(row);
-                        if (action.handleAction && row.id)
-                            action.handleAction(row.id);
-                    } }, action.label)); }))));
+                        "text-destructive focus:text-destructive"), onClick: function () { var _a; return (_a = action.handleOnClick) === null || _a === void 0 ? void 0 : _a.call(action, row); } }, action.label)); }))));
         }
         if (normalizedType === COMPONENT_TYPE.ID) {
             return (react_1.default.createElement(popover_1.Popover, null,

package/components/theme-provider.js

@@ -65,58 +65,96 @@ function ThemeApplier(_a) {
     var children = _a.children;
     var _b = (0, next_themes_1.useTheme)(), theme = _b.theme, resolvedTheme = _b.resolvedTheme;
     (0, react_1.useEffect)(function () {
-        var applyTheme = function (themeName) {
-            var themeConfig = themes_1.themes[themeName];
-            if (!themeConfig) {
-                console.warn("Theme \"".concat(themeName, "\" not found, falling back to light theme"));
-                // Fallback to light theme
-                var lightTheme = themes_1.themes.light;
-                if (lightTheme) {
-                    var root_1 = document.documentElement;
-                    Object.entries(lightTheme.colors).forEach(function (_a) {
-                        var key = _a[0], value = _a[1];
-                        root_1.style.setProperty("--".concat(key), value);
-                    });
-                }
-                return;
+        // Manage CSS classes on the root element instead of setting inline styles.
+        // This allows the stylesheet (which defines .theme-<name> and .dark
+        // blocks) to control CSS variable values and ensures consistent
+        // application across the entire UI (sidebar and main body).
+        var root = document.documentElement;
+        // Prefer a persisted color theme stored in localStorage so user color
+        // preferences survive across sessions and apply before any JS-driven
+        // hydration updates. Fall back to the `theme` provided by next-themes.
+        var persistedColor = (function () {
+            try {
+                return window.localStorage.getItem("ui-theme-color");
             }
-            var root = document.documentElement;
-            // Apply theme colors as CSS variables
-            Object.entries(themeConfig.colors).forEach(function (_a) {
-                var key = _a[0], value = _a[1];
-                root.style.setProperty("--".concat(key), value);
-            });
-            // Add theme class to root element for CSS selectors
-            root.className = root.className.replace(/theme-\w+/g, "");
-            root.classList.add("theme-".concat(themeName));
-            // Also set data-theme attribute for CSS selectors
-            root.setAttribute("data-theme", themeName);
-        };
-        // Apply theme on mount and when theme changes
-        var activeTheme = resolvedTheme || theme || "light";
-        // Always apply theme, even if it's "system" - fallback to light
-        var themeToApply = activeTheme === "system" ? "light" : activeTheme;
-        applyTheme(themeToApply);
+            catch (e) {
+                return null;
+            }
+        })();
+        var colorTheme = persistedColor || theme || "light";
+        var mode = resolvedTheme || "light";
+        // Remove any existing theme-* classes
+        Array.from(root.classList)
+            .filter(function (c) { return c.startsWith("theme-"); })
+            .forEach(function (c) { return root.classList.remove(c); });
+        // Add theme class for the selected color theme (skip adding for "light")
+        if (colorTheme && colorTheme !== "light") {
+            root.classList.add("theme-".concat(colorTheme));
+        }
+        // Toggle `dark` class based on resolved mode so `.dark` and
+        // `.theme-<name>.dark` selectors take effect from the stylesheet.
+        if (mode === "dark") {
+            root.classList.add("dark");
+        }
+        else {
+            root.classList.remove("dark");
+        }
+        // Update data-theme attribute for components that rely on it.
+        root.setAttribute("data-theme", colorTheme);
     }, [theme, resolvedTheme]);
     // Apply default theme on mount
     (0, react_1.useEffect)(function () {
-        // Apply light theme as default on first mount
-        var applyDefaultTheme = function () {
-            var lightTheme = themes_1.themes.light;
-            if (lightTheme) {
-                var root_2 = document.documentElement;
-                Object.entries(lightTheme.colors).forEach(function (_a) {
-                    var key = _a[0], value = _a[1];
-                    root_2.style.setProperty("--".concat(key), value);
-                });
-            }
-        };
-        applyDefaultTheme();
+        // Ensure default classes/attributes are present on first mount.
+        var root = document.documentElement;
+        // Remove theme-* classes and add no extra class for default light theme.
+        Array.from(root.classList)
+            .filter(function (c) { return c.startsWith("theme-"); })
+            .forEach(function (c) { return root.classList.remove(c); });
+        root.classList.remove("dark");
+        root.setAttribute("data-theme", "light");
     }, []); // Run only once on mount
     return react_1.default.createElement(react_1.default.Fragment, null, children);
 }
 function ThemeProvider(_a) {
     var children = _a.children, _b = _a.defaultTheme, defaultTheme = _b === void 0 ? "light" : _b, _c = _a.storageKey, storageKey = _c === void 0 ? "ui-theme" : _c, _d = _a.enableSystem, enableSystem = _d === void 0 ? false : _d, props = __rest(_a, ["children", "defaultTheme", "storageKey", "enableSystem"]);
-    return (react_1.default.createElement(next_themes_1.ThemeProvider, __assign({ attribute: "data-theme", defaultTheme: defaultTheme, storageKey: storageKey, enableSystem: enableSystem, themes: Object.keys(themes_1.themes) }, props),
+    // Read persisted theme and color from localStorage synchronously so
+    // we can apply them as the initial values before children render.
+    var persistedTheme = null;
+    var persistedColor = null;
+    try {
+        persistedTheme = window.localStorage.getItem(storageKey);
+    }
+    catch (e) {
+        persistedTheme = null;
+    }
+    try {
+        persistedColor = window.localStorage.getItem("ui-theme-color");
+    }
+    catch (e) {
+        persistedColor = null;
+    }
+    var initialTheme = persistedTheme || defaultTheme;
+    // Apply persisted classes immediately to avoid flash of incorrect theme.
+    try {
+        var root_1 = document.documentElement;
+        // Remove existing theme-* classes
+        Array.from(root_1.classList)
+            .filter(function (c) { return c.startsWith("theme-"); })
+            .forEach(function (c) { return root_1.classList.remove(c); });
+        if (persistedColor && persistedColor !== "default") {
+            root_1.classList.add("theme-".concat(persistedColor));
+        }
+        if (initialTheme === "dark") {
+            root_1.classList.add("dark");
+        }
+        else {
+            root_1.classList.remove("dark");
+        }
+        root_1.setAttribute("data-theme", initialTheme);
+    }
+    catch (e) {
+        // ignore DOM errors
+    }
+    return (react_1.default.createElement(next_themes_1.ThemeProvider, __assign({ attribute: "data-theme", defaultTheme: initialTheme, storageKey: storageKey, enableSystem: enableSystem, themes: Object.keys(themes_1.themes) }, props),
         react_1.default.createElement(ThemeApplier, null, children)));
 }

package/components/ui/theme-switcher.js

@@ -82,8 +82,23 @@ var ThemeSwitcher = function (_a) {
     var isDark = resolvedTheme === "dark" || theme === "dark";
     React.useEffect(function () {
         setMounted(true);
-        // Read color theme from document class
+        // Initialize color theme from localStorage first (persisted preference),
+        // otherwise fall back to any existing class on the document element.
         var root = document.documentElement;
+        try {
+            var persisted = window.localStorage.getItem("ui-theme-color");
+            if (persisted) {
+                setColorTheme(persisted);
+                // Apply persisted theme class
+                colorThemes.forEach(function (t) { return root.classList.remove("theme-".concat(t.name)); });
+                if (persisted !== "default")
+                    root.classList.add("theme-".concat(persisted));
+                return;
+            }
+        }
+        catch (e) {
+            // ignore
+        }
         var currentColorTheme = colorThemes.find(function (t) {
             return root.classList.contains("theme-".concat(t.name));
         });
@@ -104,6 +119,12 @@ var ThemeSwitcher = function (_a) {
         if (newColorTheme !== "default") {
             root.classList.add("theme-".concat(newColorTheme));
         }
+        try {
+            window.localStorage.setItem("ui-theme-color", newColorTheme);
+        }
+        catch (e) {
+            // ignore storage errors
+        }
         setColorTheme(newColorTheme);
     };
     if (!mounted) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/shadcn",
-  "version": "1.1.25",
+  "version": "1.1.28",
   "scripts": {
     "build:next": "next build",
     "build:storybook": "storybook build -c .storybook -o .out",
@@ -63,9 +63,11 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toggle": "^1.1.10",
+    "@react-pakistan/util-functions": "^1.25.16",
     "@storybook/addon-docs": "^10.1.0",
     "@storybook/addon-onboarding": "^10.1.0",
     "@storybook/nextjs": "^10.1.0",
+    "@tabler/icons-react": "^3.36.1",
     "@tailwindcss/postcss": "^4.1.17",
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/dom": "^10.4.1",
@@ -85,6 +87,7 @@
     "cmdk": "^1.1.1",
     "color": "^5.0.2",
     "date-fns": "^4.1.0",
+    "dayjs": "^1.11.19",
     "embla-carousel-react": "^8.6.0",
     "eslint": "^9.37.0",
     "eslint-config-next": "^15.5.5",
@@ -95,6 +98,7 @@
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jotai": "^2.15.0",
+    "libphonenumber-js": "^1.12.35",
     "lint-staged": "^16.2.4",
     "lodash.throttle": "^4.1.1",
     "lucide-react": "^0.556.0",
@@ -108,6 +112,7 @@
     "react-day-picker": "^9.11.1",
     "react-dom": "^19.2.0",
     "react-dropzone": "^14.3.8",
+    "react-easy-crop": "^5.5.6",
     "react-hook-form": "^7.66.1",
     "react-resizable-panels": "^3.0.6",
     "recharts": "3.5.1",
@@ -118,12 +123,9 @@
     "tailwindcss": "^4.1.17",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
+    "uuid": "^13.0.0",
     "vaul": "^1.1.2",
     "zod": "^4.1.12"
   },
-  "packageManager": "yarn@4.12.0",
-  "dependencies": {
-    "@tabler/icons-react": "^3.36.1",
-    "react-easy-crop": "^5.5.6"
-  }
+  "packageManager": "yarn@4.12.0"
 }