@acuteinfo/common-base 1.2.83 → 1.2.85

package/dist/theme/providers/ColorModeContext.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { PaletteMode } from "@mui/material";
+import { LightPaletteTokens } from "../legacy/theme";
+export interface ColorModeContextValue {
+    mode: PaletteMode;
+    toggleColorMode: () => void;
+    setColorMode: (mode: PaletteMode) => void;
+}
+/**
+ * Custom hook to safely access the ColorModeContext state.
+ */
+export declare const useColorMode: () => ColorModeContextValue;
+export interface ColorModeProviderProps {
+    children: React.ReactNode;
+    initialTokens?: LightPaletteTokens;
+}
+/**
+ * React Context Provider managing mode state ('light' | 'dark') and memoizing
+ * the generated MUI theme to avoid theme recalculations on unrelated renders.
+ */
+export declare const ColorModeProvider: React.FC<ColorModeProviderProps>;

package/dist/theme/types/ThemeConfig.d.ts

@@ -0,0 +1,12 @@
+export interface ThemeConfig {
+    mode: "light" | "dark";
+    primary: string;
+    secondary: string;
+    background: string;
+    text: string;
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+    presetId?: string;
+}

package/dist/theme/types/themeExtensions.d.ts

@@ -0,0 +1,227 @@
+import "@mui/material/styles";
+declare module "@mui/material/styles" {
+    interface Theme {
+        customShadows?: any;
+        customSpacing?: any;
+        surfaces?: any;
+        states?: any;
+        customTransitions?: any;
+    }
+    interface ThemeOptions {
+        customShadows?: any;
+        customSpacing?: any;
+        surfaces?: any;
+        states?: any;
+        customTransitions?: any;
+    }
+    interface PaletteColor {
+        lighter?: string;
+        darker?: string;
+    }
+    interface SimplePaletteColorOptions {
+        lighter?: string;
+        darker?: string;
+    }
+    interface Palette {
+        surface: {
+            page: string;
+            card: string;
+            elevated: string;
+            sidebar: string;
+            header: string;
+            footer: string;
+            input: string;
+            tabs: string;
+        };
+        border: {
+            subtle: string;
+            default: string;
+            strong: string;
+            primary: string;
+            secondary: string;
+            disabled: string;
+            error: string;
+            success: string;
+            warning: string;
+            info: string;
+        };
+        state: {
+            hover: string;
+            selected: string;
+            focus: string;
+            pressed: string;
+        };
+        greyPalette: {
+            [key: number]: string;
+        };
+        shadow: {
+            input: string;
+            card: string;
+            popover: string;
+            dialog: string;
+            paper: string;
+            alert: string;
+            default: string;
+            tooltip: string;
+            button: string;
+            table: string;
+            form: string;
+            box: string;
+            grid: string;
+            stack: string;
+            container: string;
+            stepper: string;
+            tabs: string;
+        };
+        radius: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            pill: string;
+            dialog: string;
+            card: string;
+            button: string;
+            input: string;
+        };
+        gradient: {
+            primary: string;
+            secondary: string;
+            primaryToSecondary: string;
+            subtle: string;
+            glow: string;
+            button: string;
+            buttonHover: string;
+            success: string;
+            error: string;
+            warning: string;
+            info: string;
+        };
+        space: {
+            none: string;
+            hairline: string;
+            xxs: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+            huge: string;
+            appbar: string;
+            card: string;
+            container: string;
+            section: string;
+            compact: string;
+            relaxed: string;
+        };
+        transition: {
+            fast: string;
+            normal: string;
+            slow: string;
+        };
+    }
+    interface PaletteOptions {
+        surface?: {
+            page?: string;
+            card?: string;
+            elevated?: string;
+            sidebar?: string;
+            header?: string;
+            footer?: string;
+            input?: string;
+            tabs?: string;
+        };
+        border?: {
+            subtle?: string;
+            default?: string;
+            strong?: string;
+            primary?: string;
+            secondary?: string;
+            disabled?: string;
+            error?: string;
+            success?: string;
+            warning?: string;
+            info?: string;
+        };
+        state?: {
+            hover?: string;
+            selected?: string;
+            focus?: string;
+            pressed?: string;
+        };
+        greyPalette?: {
+            [key: number]: string;
+        };
+        shadow?: {
+            input?: string;
+            card?: string;
+            popover?: string;
+            dialog?: string;
+            paper?: string;
+            alert?: string;
+            default?: string;
+            tooltip?: string;
+            button?: string;
+            table?: string;
+            form?: string;
+            box?: string;
+            grid?: string;
+            stack?: string;
+            container?: string;
+            stepper?: string;
+            tabs?: string;
+        };
+        radius?: {
+            xs?: string;
+            sm?: string;
+            md?: string;
+            lg?: string;
+            xl?: string;
+            pill?: string;
+            dialog?: string;
+            card?: string;
+            button?: string;
+            input?: string;
+        };
+        gradient?: {
+            primary?: string;
+            secondary?: string;
+            primaryToSecondary?: string;
+            subtle?: string;
+            glow?: string;
+            button?: string;
+            buttonHover?: string;
+            success?: string;
+            error?: string;
+            warning?: string;
+            info?: string;
+        };
+        space?: {
+            none?: string;
+            hairline?: string;
+            xxs?: string;
+            xs?: string;
+            sm?: string;
+            md?: string;
+            lg?: string;
+            xl?: string;
+            xxl?: string;
+            xxxl?: string;
+            huge?: string;
+            appbar?: string;
+            card?: string;
+            container?: string;
+            section?: string;
+            compact?: string;
+            relaxed?: string;
+        };
+        transition?: {
+            fast?: string;
+            normal?: string;
+            slow?: string;
+        };
+    }
+}

package/dist/theme/utils/accessibility.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Converts a hex color to its relative luminance.
+ * Based on WCAG 2.0 formulas.
+ */
+export declare const getLuminance: (hex: string) => number;
+/**
+ * Calculates the contrast ratio between two hex colors.
+ */
+export declare const getContrastRatio: (foreground: string, background: string) => number;
+/**
+ * Ensures the color is a valid 6-character hex. Returns a fallback if invalid.
+ */
+export declare const validateHex: (hex: string, fallback?: string) => string;
+/**
+ * Automatically calculates a highly readable text color (black or white)
+ * based on the background color's luminance.
+ */
+export declare const getReadableContrastText: (backgroundHex: string) => string;
+/**
+ * Validates and auto-corrects the text color against the background.
+ * If the contrast ratio is too low (e.g., < 4.5 for normal text),
+ * it returns a highly readable fallback.
+ */
+export declare const ensureReadableContrast: (textColor: string, backgroundColor: string, minContrast?: number) => string;
+/**
+ * Extracts hex colors from a CSS gradient string.
+ */
+export declare const extractGradientColors: (gradientStr: string) => string[];
+/**
+ * Calculates whether a gradient background is overall light or dark based on its
+ * first color luminance, returning an accessible text color (dark or light).
+ */
+export declare const getGradientTextColor: (gradientStr: string, darkTextColor?: string, lightTextColor?: string) => string;
+/**
+ * Iteratively adjusts the text color's HSL lightness to meet WCAG contrast
+ * requirements against the given background, while preserving the original hue.
+ *
+ * - Dark Mode: Iteratively lightens text by +2% L per step.
+ * - Light Mode: Iteratively darkens text by -2% L per step.
+ * - Max Iterations: 20 (~40% lightness delta cap).
+ * - Hard Fallback: If ratio is still < minRatio after 20 steps,
+ *   returns #F8FAFC (dark mode) or #0F172A (light mode) to guarantee compliance.
+ *
+ * @param textHex    – The candidate text hex color to adjust.
+ * @param bgHex      – The resolved background hex color to contrast against.
+ * @param mode       – Current theme mode ('light' | 'dark').
+ * @param minRatio   – Minimum WCAG contrast ratio target (default: 4.5 for AA).
+ */
+export declare const ensureIterativeContrast: (textHex: string, bgHex: string, mode: "light" | "dark", minRatio?: number) => string;

package/dist/theme/utils/colorUtils.d.ts

@@ -0,0 +1,70 @@
+export type ColorCallback = (error: Error | null, result: string) => void;
+/**
+ * Reverses contrast of any color dynamically, maintaining identical format output.
+ * Returns "inherit" if color format is invalid or unavailable.
+ */
+export declare function reverseColorContrast(colorInput?: string | null, callback?: ColorCallback): string;
+/**
+ * Utility to tweak brightness slightly.
+ */
+export declare const adjustColor: (color: string, percent: number) => string;
+/**
+ * Automatically converts any dynamic light color into a rich,
+ * desaturated dark mode equivalent (maintaining the color's hue tint).
+ */
+export declare const invertToDarkBg: (color: string) => string;
+/**
+ * Deterministically derives a softer, lighter shade of a light mode color
+ * for dark mode surfaces to prevent visual vibration and ensure accessibility.
+ */
+export declare const lightenColorForDarkMode: (color: string, percent?: number) => string;
+/**
+ * Shifts the HSL lightness of a color by an absolute amount.
+ * Positive values lighten, negative values darken.
+ * Preserves hue and saturation. Clamps result to [0, 100].
+ *
+ * Unlike `adjustColor` (additive RGB), this operates in perceptual HSL space,
+ * ensuring consistent luminance shifts regardless of the input color's brightness.
+ */
+export declare const shiftLightness: (hex: string, deltaL: number) => string;
+/**
+ * Scales a base reference color into an ultra-light tint for Light Mode (e.g. ~96% lightness)
+ * or a deep dark canvas shade for Dark Mode (e.g. ~5% lightness) preserving the original hue.
+ */
+export declare const deriveScaledBackground: (baseHex: string, mode: "light" | "dark") => {
+    defaultBg: string;
+    paperBg: string;
+};
+/**
+ * Returns the perceived HSL lightness (0–100) of a hex color.
+ * Used for conditional branching in the mode-adaptation pipeline
+ * (e.g., "is this background too light for dark mode?").
+ */
+export declare const getPerceivedLightness: (hex: string) => number;
+/**
+ * Adapts a brand color (primary/secondary) for dark mode surfaces.
+ *
+ * Lightens the color by `deltaL` (default 30) in HSL space and slightly
+ * desaturates it (cap at 85% S) to prevent optical vibration against
+ * dark backgrounds while preserving hue identity.
+ *
+ * Skips adjustment if the color is already light enough (L ≥ 60).
+ */
+export declare const adaptBrandColorForDark: (hex: string, deltaL?: number) => string;
+/**
+ * Adapts a brand color (primary/secondary) for light mode surfaces.
+ *
+ * Darkens the color by `deltaL` (default 20) in HSL space to ensure
+ * crisp contrast against light backgrounds. Preserves hue and saturation.
+ *
+ * Skips adjustment if the color is already dark enough (L ≤ 40).
+ */
+export declare const adaptBrandColorForLight: (hex: string, deltaL?: number) => string;
+/**
+ * Converts any dark color into a light mode background equivalent.
+ * This is the inverse of `invertToDarkBg()`.
+ *
+ * Preserves the original hue tint while expanding lightness to ~96%
+ * and capping saturation at 20% for a soft off-white result.
+ */
+export declare const adaptToLightBg: (color: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acuteinfo/common-base",
-  "version": "1.2.83",
+  "version": "1.2.85",
   "license": "MIT",
   "keywords": [
     "react",
@@ -32,6 +32,8 @@
     "dayjs": "^1.11.9",
     "history": "^5.0.0",
     "i18next": "^23.12.2",
+    "jotai": "^2.17.1",
+    "jotai-family": "^1.0.1",
     "js2xmlparser": "^5.0.0",
     "json-rules-engine": "^5.0.4",
     "jspdf": "^2.5.1",
@@ -56,7 +58,6 @@
     "react-to-print": "^2.14.7",
     "react-virtuoso": "^4.13.0",
     "react-window": "^1.8.6",
-    "recoil": "^0.7.7",
     "regenerator-runtime": "^0.14.1",
     "typeface-roboto": "^0.0.75",
     "typescript": "^4.2.2",
@@ -132,4 +133,4 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
-}
+}

package/rollup.config.mjs

@@ -37,7 +37,6 @@ export default defineConfig({
     "json-rules-engine",
     "pako",
     "xlsx",
-    "recoil",
     "react-query",
     "react-number-format",
     "react-imask",
@@ -52,8 +51,9 @@ export default defineConfig({
     "match-sorter",
     "axios",
     "@koale/useworker",
-    "ag-grid-community",
-    "ag-grid-react",
+    /^ag-grid-community/,
+    /^ag-grid-react/,
+    /^jotai/,
   ],
   plugins: [
     resolve(),

package/dist/components/dataTable/atoms/index.d.ts

@@ -1,11 +0,0 @@
-export interface QueryType {
-    accessor: string;
-    condition: string;
-    value: any[] | any;
-}
-export interface SubscriptionType {
-    [key: string]: string[] | string | undefined;
-}
-export declare const filterAtom: (param: string) => import("recoil").RecoilState<QueryType | null>;
-export declare const filtersAtom: (param: string) => import("recoil").RecoilState<QueryType[] | null>;
-export declare const subscribeToFilterChange: (param: SubscriptionType) => import("recoil").RecoilValueReadOnly<QueryType[]>;

package/dist/components/layoutReport/hooks/useDebouncedValue.d.ts

@@ -1,12 +0,0 @@
-/**
- * A custom hook that returns a debounced version of the input value.
- * The debounced value updates after a specified delay, which is useful
- * for scenarios like search inputs where you want to limit the number
- * of updates or API calls while the user is typing.
- *
- * @param {string} value - The input value that you want to debounce.
- * @param {number} [delay=500] - The amount of time (in milliseconds) to wait
- * before updating the debounced value. Defaults to 500 milliseconds.
- * @returns {string} The debounced value that updates after the specified delay.
- */
-export declare const useDebouncedValue: (value: string, delay?: number) => string;

package/dist/packages/form/src/observer.d.ts

@@ -1 +0,0 @@
-export declare const TimeTravelObserver: () => import("react/jsx-runtime").JSX.Element;