pixelize-design-library 2.2.198 → 2.3.1-beta.1

package/dist/Theme/Dark/palette.js

@@ -0,0 +1,372 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var darkPalette = {
+    primary: {
+        50: "#2d1f4a",
+        100: "#3d2a63",
+        200: "#4e357c",
+        300: "#6244a0",
+        400: "#7a56c5",
+        500: "#9A4FE5",
+        600: "#a967e8",
+        700: "#bb83ed",
+        800: "#cca3f2",
+        900: "#dfc3f7",
+        opacity: {
+            4: "#9A4FE50a",
+            8: "#9A4FE514",
+            16: "#9A4FE529",
+            24: "#9A4FE53d",
+            32: "#9A4FE552",
+            40: "#9A4FE566",
+            48: "#9A4FE57a",
+        },
+    },
+    secondary: {
+        50: "#1e2235",
+        100: "#252b42",
+        200: "#2d3554",
+        300: "#3a4269",
+        400: "#47507e",
+        500: "#5a6496",
+        600: "#6f79a8",
+        700: "#8e97be",
+        800: "#adb4d3",
+        900: "#ccd0e7",
+        opacity: {
+            4: "#5a64960a",
+            8: "#5a649614",
+            16: "#5a649629",
+            24: "#5a64963d",
+            32: "#5a649652",
+            40: "#5a649666",
+            48: "#5a64967a",
+        },
+    },
+    tertiary: {
+        50: "#1a1d2e",
+        100: "#21253a",
+        200: "#292e48",
+        300: "#333857",
+        400: "#3d4366",
+        500: "#4a5175",
+        600: "#5f668b",
+        700: "#7d83a4",
+        800: "#9ca1bc",
+        900: "#bbbfd4",
+        opacity: {
+            4: "#4a51750a",
+            8: "#4a517514",
+            16: "#4a517529",
+            24: "#4a51753d",
+            32: "#4a517552",
+            40: "#4a517566",
+            48: "#4a51757a",
+        },
+    },
+    transparent: "transparent",
+    black: "#000",
+    white: "#fff",
+    semantic: {
+        success: {
+            50: "#0d2e1f",
+            100: "#133d28",
+            200: "#1a5236",
+            300: "#216644",
+            400: "#297b53",
+            500: "#23b85c",
+            600: "#3dc770",
+            700: "#5fd388",
+            800: "#88e0a7",
+            900: "#b3edc6",
+        },
+        error: {
+            50: "#2e1210",
+            100: "#3d1917",
+            200: "#52201e",
+            300: "#662825",
+            400: "#7b302c",
+            500: "#f2463a",
+            600: "#f45f54",
+            700: "#f6796f",
+            800: "#f9998f",
+            900: "#fbbbb6",
+        },
+        warning: {
+            50: "#2e1f0d",
+            100: "#3d2a12",
+            200: "#523817",
+            300: "#66461d",
+            400: "#7b5523",
+            500: "#Ff9162",
+            600: "#ffa07a",
+            700: "#ffb395",
+            800: "#ffc7ae",
+            900: "#ffdacb",
+        },
+        info: {
+            50: "#0d2430",
+            100: "#123040",
+            200: "#184055",
+            300: "#1e5069",
+            400: "#24607e",
+            500: "#5FC4de",
+            600: "#76cde3",
+            700: "#90d8ea",
+            800: "#aee3f1",
+            900: "#caecf7",
+        },
+    },
+    gray: {
+        50: "#f7fafc",
+        100: "#edf2f7",
+        200: "#e2e8f0",
+        300: "#cbd5e0",
+        400: "#a0aec0",
+        500: "#718096",
+        600: "#4a5568",
+        700: "#2d3748",
+        800: "#1a202c",
+        900: "#171923",
+    },
+    red: {
+        50: "#2e1210",
+        100: "#3d1917",
+        200: "#52201e",
+        300: "#662825",
+        400: "#7b302c",
+        500: "#f2463a",
+        600: "#f45f54",
+        700: "#f6796f",
+        800: "#f9998f",
+        900: "#fbbbb6",
+    },
+    orange: {
+        50: "#2e1f0d",
+        100: "#3d2a12",
+        200: "#523817",
+        300: "#66461d",
+        400: "#7b5523",
+        500: "#Ff9162",
+        600: "#ffa07a",
+        700: "#ffb395",
+        800: "#ffc7ae",
+        900: "#ffdacb",
+    },
+    yellow: {
+        50: "#2b2509",
+        100: "#3a310d",
+        200: "#4d4211",
+        300: "#615315",
+        400: "#756419",
+        500: "#f7d343",
+        600: "#f9db62",
+        700: "#fbe281",
+        800: "#fdeaa5",
+        900: "#fef2c8",
+    },
+    green: {
+        50: "#0d2e1f",
+        100: "#133d28",
+        200: "#1a5236",
+        300: "#216644",
+        400: "#297b53",
+        500: "#23b85c",
+        600: "#3dc770",
+        700: "#5fd388",
+        800: "#88e0a7",
+        900: "#b3edc6",
+    },
+    teal: {
+        50: "#0d2430",
+        100: "#123040",
+        200: "#184055",
+        300: "#1e5069",
+        400: "#24607e",
+        500: "#5FC4de",
+        600: "#76cde3",
+        700: "#90d8ea",
+        800: "#aee3f1",
+        900: "#caecf7",
+    },
+    blue: {
+        50: "#0d2033",
+        100: "#122b44",
+        200: "#173959",
+        300: "#1c476e",
+        400: "#215583",
+        500: "#3182ce",
+        600: "#4a95d9",
+        700: "#6aaae2",
+        800: "#8dbfeb",
+        900: "#b4d5f3",
+    },
+    cyan: {
+        50: "#0d2a2e",
+        100: "#12383d",
+        200: "#174b51",
+        300: "#1c5e65",
+        400: "#21717a",
+        500: "#00b5d8",
+        600: "#1fc4e5",
+        700: "#44cfec",
+        800: "#72dcf2",
+        900: "#a3e9f7",
+    },
+    purple: {
+        50: "#1e1533",
+        100: "#281d44",
+        200: "#34265a",
+        300: "#422f70",
+        400: "#513987",
+        500: "#805ad5",
+        600: "#9f7aea",
+        700: "#b794f4",
+        800: "#d6bcfa",
+        900: "#e9d8fd",
+    },
+    pink: {
+        50: "#2e1020",
+        100: "#3d152b",
+        200: "#521c3a",
+        300: "#662249",
+        400: "#7b2958",
+        500: "#d53f8c",
+        600: "#dd5a9e",
+        700: "#e577b2",
+        800: "#ed98c8",
+        900: "#f5badc",
+    },
+    background: {
+        50: "#1a1d2e",
+        100: "#1e2235",
+        200: "#22273c",
+        300: "#262c43",
+        400: "#2a314a",
+        500: "#2e3652",
+        600: "#434d6b",
+        700: "#616e8e",
+        800: "#8490ae",
+        900: "#a8b1ca",
+    },
+    backgroundColor: {
+        main: "#111827",
+        secondary: "#1a202c",
+        tertiary: "#1e2535",
+        quaternary: "#252e3d",
+        light: "#161b27",
+        medium: "#1c2333",
+        accent: "#212840",
+        subtle: "#131926",
+        muted: "#202840",
+        neutral: "#1a2133",
+        base: "#111827",
+        tableHeader: "#161d2e",
+    },
+    text: {
+        50: "#1a1d2b",
+        100: "#2d3149",
+        200: "#434867",
+        300: "#5c6180",
+        400: "#777c9a",
+        500: "#9499b4",
+        600: "#adb1c8",
+        700: "#c6c9da",
+        800: "#dfe1eb",
+        900: "#f0f1f7",
+    },
+    header: {
+        50: "#1c2130",
+        100: "#252c3f",
+        200: "#2f384e",
+        300: "#39445e",
+        400: "#44506e",
+        500: "#c8cfe0",
+        600: "#d4dae8",
+        700: "#e0e5f0",
+        800: "#eceff7",
+        900: "#f5f7fb",
+    },
+    placeholder: {
+        50: "#1e2235",
+        100: "#272c42",
+        200: "#31374f",
+        300: "#3b425c",
+        400: "#464d6a",
+        500: "#6b7191",
+        600: "#8388a5",
+        700: "#9da2ba",
+        800: "#b7bbcf",
+        900: "#d1d4e4",
+    },
+    boxShadow: {
+        primary: "#9A52E247",
+        error: "#F2463A47",
+        default: "#00000066",
+    },
+    sidebar: {
+        background: {
+            50: "#0d1117",
+            100: "#111827",
+            200: "#0d1526",
+            300: "#1a2540",
+            400: "#1f2d4d",
+            500: "#0a0f1e",
+            600: "#090d1b",
+            700: "#070b17",
+            800: "#060913",
+            900: "#04070f",
+        },
+    },
+    boxborder: {
+        50: "#1e2235",
+        100: "#252b42",
+        200: "#2c3250",
+        300: "#33395e",
+        400: "#3a406c",
+        500: "#41477a",
+        600: "#565c91",
+        700: "#7479a8",
+        800: "#9499bf",
+        900: "#b5b9d6",
+    },
+    border: {
+        50: "#1a1e2e",
+        100: "#1f2438",
+        200: "#252a42",
+        300: "#2b314c",
+        400: "#313756",
+        500: "#373d60",
+        600: "#4d5479",
+        700: "#6b7296",
+        800: "#8d93b3",
+        900: "#b0b4d0",
+    },
+    table: {
+        hover: {
+            50: "#171c2c",
+            100: "#1b2033",
+            200: "#1f243a",
+            300: "#232841",
+            400: "#272c48",
+            500: "#2b304f",
+            600: "#3a3f63",
+            700: "#545879",
+            800: "#72768f",
+            900: "#9295a6",
+        },
+    },
+    disabled: {
+        50: "#1a1e2e",
+        100: "#1f2438",
+        200: "#252a42",
+        300: "#2b314c",
+        400: "#313756",
+        500: "#373d60",
+        600: "#4d5479",
+        700: "#6b7296",
+        800: "#8d93b3",
+        900: "#b0b4d0",
+    },
+};
+exports.default = darkPalette;

package/dist/Theme/Default/palette.d.ts

@@ -1,4 +1,8 @@
 declare const palette: {
+    gradient: {
+        from: string;
+        to: string;
+    };
     primary: {
         50: string;
         100: string;

package/dist/Theme/Default/palette.js

@@ -281,7 +281,10 @@ var disabled = {
     800: "#625d75",
     900: "#4b4759",
 };
+// Two-tone brand gradient (violet → pink). Each theme overrides with its own pair.
+var gradient = { from: "#8B3FC8", to: "#EC4899" };
 var palette = {
+    gradient: gradient,
     primary: primary,
     secondary: secondary,
     tertiary: tertiary,

package/dist/Theme/Emerald/palette.d.ts

@@ -1,4 +1,8 @@
 declare const palette: {
+    gradient: {
+        from: string;
+        to: string;
+    };
     primary: {
         50: string;
         100: string;

package/dist/Theme/Emerald/palette.js

@@ -30,7 +30,8 @@ var primary = {
     900: "#043b35",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
-var palette = __assign(__assign({}, palette_1.default), { primary: primary, 
+var palette = __assign(__assign({}, palette_1.default), { gradient: { from: "#0f9d8a", to: "#06b6d4" }, // teal → cyan
+    primary: primary, 
     // 🌫️ Neutral gray (slightly cool to match teal)
     gray: {
         50: "#f6f8f8",

package/dist/Theme/Meadow/palette.d.ts

@@ -1,4 +1,8 @@
 declare const palette: {
+    gradient: {
+        from: string;
+        to: string;
+    };
     primary: {
         50: string;
         100: string;

package/dist/Theme/Meadow/palette.js

@@ -30,7 +30,8 @@ var primary = {
     900: "#0a2016",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
-var palette = __assign(__assign({}, palette_1.default), { primary: primary, tertiary: __assign({}, primary), gray: {
+var palette = __assign(__assign({}, palette_1.default), { gradient: { from: "#2d6a4f", to: "#14b8a6" }, // forest green → teal
+    primary: primary, tertiary: __assign({}, primary), gray: {
         50: "#f6f9f7",
         100: "#ecf1ee",
         200: "#dce5e0",

package/dist/Theme/Radiant/palette.d.ts

@@ -1,4 +1,8 @@
 declare const palette: {
+    gradient: {
+        from: string;
+        to: string;
+    };
     primary: {
         50: string;
         100: string;

package/dist/Theme/Radiant/palette.js

@@ -30,7 +30,8 @@ var primary = {
     900: "#531a14",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
-var palette = __assign(__assign({}, palette_1.default), { primary: primary, 
+var palette = __assign(__assign({}, palette_1.default), { gradient: { from: "#cf4e3a", to: "#f59e0b" }, // terracotta red → amber
+    primary: primary, 
     // 🌫️ Neutral gray (slightly warm, not pink)
     gray: {
         50: "#f8f6f5",

package/dist/Theme/Rosewood/palette.d.ts

@@ -1,4 +1,8 @@
 declare const palette: {
+    gradient: {
+        from: string;
+        to: string;
+    };
     primary: {
         50: string;
         100: string;

package/dist/Theme/Rosewood/palette.js

@@ -30,7 +30,8 @@ var primary = {
     900: "#552634",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
-var palette = __assign(__assign({}, palette_1.default), { primary: primary, 
+var palette = __assign(__assign({}, palette_1.default), { gradient: { from: "#d16a7e", to: "#fb7185" }, // rose → coral pink
+    primary: primary, 
     // 🌫️ Neutral gray (slightly warm, avoids purple tint)
     gray: {
         50: "#f9f7f7",

package/dist/Theme/Skyline/palette.d.ts

@@ -1,4 +1,8 @@
 declare const palette: {
+    gradient: {
+        from: string;
+        to: string;
+    };
     primary: {
         50: string;
         100: string;

package/dist/Theme/Skyline/palette.js

@@ -30,7 +30,8 @@ var primary = {
     900: "#071021",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
-var palette = __assign(__assign({}, palette_1.default), { primary: primary, tertiary: __assign({}, primary), gray: {
+var palette = __assign(__assign({}, palette_1.default), { gradient: { from: "#1a3a6b", to: "#38bdf8" }, // deep navy → sky blue
+    primary: primary, tertiary: __assign({}, primary), gray: {
         50: "#f4f6fa",
         100: "#e6eaf2",
         200: "#d3dae8",

package/dist/Theme/Slate/palette.d.ts

@@ -1,4 +1,8 @@
 declare const palette: {
+    gradient: {
+        from: string;
+        to: string;
+    };
     primary: {
         50: string;
         100: string;

package/dist/Theme/Slate/palette.js

@@ -30,7 +30,8 @@ var primary = {
     900: "#111827",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
-var palette = __assign(__assign({}, palette_1.default), { primary: primary, tertiary: __assign({}, primary), gray: {
+var palette = __assign(__assign({}, palette_1.default), { gradient: { from: "#6b7280", to: "#818cf8" }, // slate gray → indigo
+    primary: primary, tertiary: __assign({}, primary), gray: {
         50: "#f9fafb",
         100: "#f3f4f6",
         200: "#e5e7eb",

package/dist/Theme/themeProps.d.ts

@@ -2,6 +2,10 @@ import "@chakra-ui/react";
 import { Theme as ChakraTheme } from "@chakra-ui/react";
 export type CustomThemeProps = {
     colors: {
+        gradient?: {
+            from: string;
+            to: string;
+        };
         primary: {
             50: string;
             100: string;

package/dist/Utils/table.d.ts

@@ -1,9 +1,30 @@
 import React from "react";
 import { DataObject, TableHeaderProps } from "../Components/Table/TableProps";
+/**
+ * Type-aware, null-safe comparison. Detects numbers and dates; otherwise falls
+ * back to a numeric-aware locale string compare. Empty/null values sort last.
+ */
+export declare function compareValues(aRaw: any, bRaw: any, direction: "asc" | "desc" | "none"): number;
 export declare function SortMultiColumnData(data: Record<string, string | number>[], sortConfig: {
     column: string | number;
     direction: string;
 }[]): Record<string, string | number>[];
+export type TablePaletteColor = {
+    solid: string;
+    soft: string;
+    text: string;
+};
+/** Deterministic, theme-aware color palette for groups + status pills. */
+export declare function buildTablePalette(theme: any): TablePaletteColor[];
+/** Pick a deterministic palette color for a value, with optional override hex. */
+export declare function pickTableColor(value: string | number, palette: TablePaletteColor[], override?: string): TablePaletteColor;
+export type TableGroup = {
+    value: string | number;
+    label: string;
+    rows: DataObject[];
+};
+/** Partition rows by a column key, preserving first-seen group order. */
+export declare function groupRows(data: DataObject[], groupBy: string | number): TableGroup[];
 export declare const calculateLeftOffset: (columns: number[], index: number) => number;
 /**
  * When a column has no `node`, raw cell values are rendered; plain objects