@vritti/quantum-ui 0.3.17 → 0.3.18

package/dist/assets/quantum-ui.css

@@ -944,6 +944,26 @@ svg.react-flow__connectionline {
   --sidebar-accent-foreground: oklch(0.2302 0.0547 256.1829);
   --sidebar-border: oklch(0.9467 0.0207 248.0465);
   --sidebar-ring: oklch(0.5789 0.1833 256.2496);
+  /**
+   * Categorical "group" palette — 12 theme-aware color keys for charts, graphs,
+   * legends, and color pickers (e.g. the org-structure graph / site-group picker).
+   * A group's color is a nullable key (null → default primary). Light values sit on
+   * white cards; dark values (in .dark) are lighter/more luminous for the dark canvas.
+   * Exposed to Tailwind as bg-group, text-group, and border-group utilities via
+   * @theme inline below. Rendered via var(--group-<key>) or the utilities — never a raw hex.
+   */
+  --group-blue: oklch(0.55 0.18 255);
+  --group-green: oklch(0.6 0.16 150);
+  --group-amber: oklch(0.72 0.15 75);
+  --group-rose: oklch(0.6 0.2 15);
+  --group-violet: oklch(0.55 0.2 300);
+  --group-teal: oklch(0.62 0.12 185);
+  --group-orange: oklch(0.65 0.18 45);
+  --group-lime: oklch(0.68 0.17 130);
+  --group-cyan: oklch(0.65 0.12 210);
+  --group-indigo: oklch(0.52 0.19 280);
+  --group-fuchsia: oklch(0.6 0.22 330);
+  --group-slate: oklch(0.55 0.03 255);
   --font-sans: "IBM Plex Sans", sans-serif;
   --font-serif: "Playfair Display", serif;
   --font-mono: "JetBrains Mono", monospace;
@@ -1007,6 +1027,19 @@ svg.react-flow__connectionline {
   --sidebar-accent-foreground: oklch(0.9842 0.0034 247.8575);
   --sidebar-border: oklch(0.2795 0.01 260.031);
   --sidebar-ring: oklch(0.49 0.188 259.8145);
+  /* Group palette — brighter/more luminous variants for the dark canvas. */
+  --group-blue: oklch(0.68 0.16 255);
+  --group-green: oklch(0.72 0.15 150);
+  --group-amber: oklch(0.82 0.14 75);
+  --group-rose: oklch(0.7 0.18 15);
+  --group-violet: oklch(0.7 0.18 300);
+  --group-teal: oklch(0.74 0.12 185);
+  --group-orange: oklch(0.75 0.16 45);
+  --group-lime: oklch(0.8 0.16 130);
+  --group-cyan: oklch(0.78 0.12 210);
+  --group-indigo: oklch(0.66 0.17 280);
+  --group-fuchsia: oklch(0.72 0.2 330);
+  --group-slate: oklch(0.7 0.03 255);
   --font-sans: "IBM Plex Sans", sans-serif;
   --font-serif: "Playfair Display", serif;
   --font-mono: "JetBrains Mono", monospace;
@@ -1066,6 +1099,20 @@ svg.react-flow__connectionline {
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
+  /* Categorical group palette -> bg-group, text-group, border-group utilities (auto light/dark). */
+  --color-group-blue: var(--group-blue);
+  --color-group-green: var(--group-green);
+  --color-group-amber: var(--group-amber);
+  --color-group-rose: var(--group-rose);
+  --color-group-violet: var(--group-violet);
+  --color-group-teal: var(--group-teal);
+  --color-group-orange: var(--group-orange);
+  --color-group-lime: var(--group-lime);
+  --color-group-cyan: var(--group-cyan);
+  --color-group-indigo: var(--group-indigo);
+  --color-group-fuchsia: var(--group-fuchsia);
+  --color-group-slate: var(--group-slate);
+
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);
   --font-serif: var(--font-serif);
@@ -3205,6 +3252,54 @@ select:-webkit-autofill:active {
     border-color: var(--color-green-500);
   }
 
+  .border-group-amber {
+    border-color: var(--group-amber);
+  }
+
+  .border-group-blue {
+    border-color: var(--group-blue);
+  }
+
+  .border-group-cyan {
+    border-color: var(--group-cyan);
+  }
+
+  .border-group-fuchsia {
+    border-color: var(--group-fuchsia);
+  }
+
+  .border-group-green {
+    border-color: var(--group-green);
+  }
+
+  .border-group-indigo {
+    border-color: var(--group-indigo);
+  }
+
+  .border-group-lime {
+    border-color: var(--group-lime);
+  }
+
+  .border-group-orange {
+    border-color: var(--group-orange);
+  }
+
+  .border-group-rose {
+    border-color: var(--group-rose);
+  }
+
+  .border-group-slate {
+    border-color: var(--group-slate);
+  }
+
+  .border-group-teal {
+    border-color: var(--group-teal);
+  }
+
+  .border-group-violet {
+    border-color: var(--group-violet);
+  }
+
   .border-input {
     border-color: var(--input);
   }
@@ -3431,6 +3526,54 @@ select:-webkit-autofill:active {
     background-color: var(--color-green-100);
   }
 
+  .bg-group-amber {
+    background-color: var(--group-amber);
+  }
+
+  .bg-group-blue {
+    background-color: var(--group-blue);
+  }
+
+  .bg-group-cyan {
+    background-color: var(--group-cyan);
+  }
+
+  .bg-group-fuchsia {
+    background-color: var(--group-fuchsia);
+  }
+
+  .bg-group-green {
+    background-color: var(--group-green);
+  }
+
+  .bg-group-indigo {
+    background-color: var(--group-indigo);
+  }
+
+  .bg-group-lime {
+    background-color: var(--group-lime);
+  }
+
+  .bg-group-orange {
+    background-color: var(--group-orange);
+  }
+
+  .bg-group-rose {
+    background-color: var(--group-rose);
+  }
+
+  .bg-group-slate {
+    background-color: var(--group-slate);
+  }
+
+  .bg-group-teal {
+    background-color: var(--group-teal);
+  }
+
+  .bg-group-violet {
+    background-color: var(--group-violet);
+  }
+
   .bg-input {
     background-color: var(--input);
   }
@@ -4112,6 +4255,54 @@ select:-webkit-autofill:active {
     color: var(--color-green-800);
   }
 
+  .text-group-amber {
+    color: var(--group-amber);
+  }
+
+  .text-group-blue {
+    color: var(--group-blue);
+  }
+
+  .text-group-cyan {
+    color: var(--group-cyan);
+  }
+
+  .text-group-fuchsia {
+    color: var(--group-fuchsia);
+  }
+
+  .text-group-green {
+    color: var(--group-green);
+  }
+
+  .text-group-indigo {
+    color: var(--group-indigo);
+  }
+
+  .text-group-lime {
+    color: var(--group-lime);
+  }
+
+  .text-group-orange {
+    color: var(--group-orange);
+  }
+
+  .text-group-rose {
+    color: var(--group-rose);
+  }
+
+  .text-group-slate {
+    color: var(--group-slate);
+  }
+
+  .text-group-teal {
+    color: var(--group-teal);
+  }
+
+  .text-group-violet {
+    color: var(--group-violet);
+  }
+
   .text-info {
     color: var(--info);
   }

package/dist/lib/utils/colors.d.ts

@@ -0,0 +1,9 @@
+export declare const GROUP_COLOR_KEYS: readonly ["blue", "green", "amber", "rose", "violet", "teal", "orange", "lime", "cyan", "indigo", "fuchsia", "slate"];
+export type GroupColorKey = (typeof GROUP_COLOR_KEYS)[number];
+export declare const GROUP_COLORS: {
+    key: GroupColorKey;
+    label: string;
+    var: string;
+}[];
+export declare function groupColorVar(key?: string | null): string;
+//# sourceMappingURL=colors.d.ts.map

package/dist/lib/utils/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../lib/utils/colors.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,gBAAgB,uHAanB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAG9D,eAAO,MAAM,YAAY,EAAE;IAAE,GAAG,EAAE,aAAa,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EAI1E,CAAC;AAGJ,wBAAgB,aAAa,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAEzD"}

package/dist/utils/colors.js

@@ -0,0 +1,25 @@
+const GROUP_COLOR_KEYS = [
+  "blue",
+  "green",
+  "amber",
+  "rose",
+  "violet",
+  "teal",
+  "orange",
+  "lime",
+  "cyan",
+  "indigo",
+  "fuchsia",
+  "slate"
+];
+const GROUP_COLORS = GROUP_COLOR_KEYS.map((key) => ({
+  key,
+  label: key.charAt(0).toUpperCase() + key.slice(1),
+  var: `var(--group-${key})`
+}));
+function groupColorVar(key) {
+  return key && GROUP_COLOR_KEYS.includes(key) ? `var(--group-${key})` : "var(--color-primary)";
+}
+
+export { GROUP_COLORS, GROUP_COLOR_KEYS, groupColorVar };
+//# sourceMappingURL=colors.js.map

package/dist/utils/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["../../lib/utils/colors.ts"],"sourcesContent":["/**\n * Categorical \"group\" color palette.\n *\n * A shared, theme-aware set of 12 color keys backed by the `--group-*` CSS variables\n * declared in quantum-ui's theme (index.css). Each key auto-swaps light/dark and is also\n * exposed to Tailwind as `bg-group-*` / `text-group-*` / `border-group-*` utilities.\n *\n * Use for charts, graphs, legends, and color pickers where a stable set of distinct,\n * theme-consistent colors is needed. Render via `var(--group-<key>)`, the `var` field on\n * `GROUP_COLORS`, or the utility classes — never a raw hex.\n */\nexport const GROUP_COLOR_KEYS = [\n  'blue',\n  'green',\n  'amber',\n  'rose',\n  'violet',\n  'teal',\n  'orange',\n  'lime',\n  'cyan',\n  'indigo',\n  'fuchsia',\n  'slate',\n] as const;\n\nexport type GroupColorKey = (typeof GROUP_COLOR_KEYS)[number];\n\n/** Palette entries with a display label and the CSS `var(...)` reference for each key. */\nexport const GROUP_COLORS: { key: GroupColorKey; label: string; var: string }[] = GROUP_COLOR_KEYS.map((key) => ({\n  key,\n  label: key.charAt(0).toUpperCase() + key.slice(1),\n  var: `var(--group-${key})`,\n}));\n\n/** Resolve a (possibly nullable) color key to a CSS color; falls back to the theme primary. */\nexport function groupColorVar(key?: string | null): string {\n  return key && (GROUP_COLOR_KEYS as readonly string[]).includes(key) ? `var(--group-${key})` : 'var(--color-primary)';\n}\n"],"names":[],"mappings":"AAWO,MAAM,gBAAA,GAAmB;AAAA,EAC9B,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAKO,MAAM,YAAA,GAAqE,gBAAA,CAAiB,GAAA,CAAI,CAAC,GAAA,MAAS;AAAA,EAC/G,GAAA;AAAA,EACA,KAAA,EAAO,IAAI,MAAA,CAAO,CAAC,EAAE,WAAA,EAAY,GAAI,GAAA,CAAI,KAAA,CAAM,CAAC,CAAA;AAAA,EAChD,GAAA,EAAK,eAAe,GAAG,CAAA,CAAA;AACzB,CAAA,CAAE;AAGK,SAAS,cAAc,GAAA,EAA6B;AACzD,EAAA,OAAO,OAAQ,gBAAA,CAAuC,QAAA,CAAS,GAAG,CAAA,GAAI,CAAA,YAAA,EAAe,GAAG,CAAA,CAAA,CAAA,GAAM,sBAAA;AAChG;;;;"}

package/package.json

@@ -5,7 +5,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.17",
+  "version": "0.3.18",
   "type": "module",
   "sideEffects": false,
   "repository": {
@@ -556,6 +556,10 @@
       "types": "./dist/lib/utils/decimal.d.ts",
       "import": "./dist/utils/decimal.js"
     },
+    "./colors": {
+      "types": "./dist/lib/utils/colors.d.ts",
+      "import": "./dist/utils/colors.js"
+    },
     "./hotkeys": {
       "types": "./dist/lib/utils/hotkeys.d.ts",
       "import": "./dist/utils/hotkeys.js"