@mindlogic-ai/logician-ui 4.0.0 → 5.0.0-alpha.1

package/codemods/5.0/token-renames.js

@@ -0,0 +1,231 @@
+/**
+ * logician-ui 5.0 codemod — token-renames
+ *
+ * Renames deprecated 4.x colour token names inside string literals, JSX string
+ * attributes and template-literal quasis, using src/theme/deprecatedColorTokens.json
+ * — the same file the theme builds its aliases from and the
+ * `logician-ui/no-deprecated-tokens` ESLint rule warns with, and with the same
+ * token boundaries as that rule:
+ *
+ *   'primary.lightest'                → 'primary.wash'
+ *   'slate.800'                       → 'neutral.9'   ('slate.1000' is its own token)
+ *   'var(--chakra-colors-slate-300)'  → 'var(--chakra-colors-neutral-5)'
+ *   'gray.300'                        → 'neutral.5'   (removedPrimitives.gray)
+ *   'fg.accent'                       → 'primary.main', except `color` on a
+ *                                       <Link>/<a> element → 'fg.link'
+ *
+ * Not renamed, reported instead: the other removed raw primitives (blue.N,
+ * violet.N, rose.N, gold.N, green.N, grayDark.N, purple/red/yellow.N) — their
+ * replacement depends on what the colour is for — and token names used as
+ * object keys or computed member access (`theme.colors['slate.800']`) — theme
+ * definitions, where renaming changes what the key defines or reads.
+ * Type-level literals (`type T = 'slate.800'`) are skipped, as in the rule.
+ */
+'use strict';
+
+const data = require('../../src/theme/deprecatedColorTokens.json');
+const {
+  setStringLiteral,
+  lineOf,
+  textOf,
+  createReporter,
+} = require('./lib/shared');
+
+const NAME = 'token-renames';
+
+const ALIASES = data.aliases;
+const GRAY = data.removedPrimitives.gray;
+const FAMILIES = data.removedPrimitives.families;
+
+const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+/**
+ * Token path → the name Chakra gives its CSS variable: dots become dashes and
+ * camelCase segments are kebab-cased (`primary.fillStrong` → `primary-fill-strong`,
+ * `grayDark.200` → `gray-dark-200`), as Chakra's own `dashCase` does. Used for
+ * both the names we match and the names we write — see src/theme/cssVarNames.test.ts.
+ */
+const kebab = (s) =>
+  s.replace(/\./g, '-').replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+const keys = Object.keys(ALIASES).sort((a, b) => b.length - a.length);
+const dotted = keys.map(esc).join('|');
+const dashedToKey = new Map(keys.map((k) => [kebab(k), k]));
+const dashed = [...dashedToKey.keys()]
+  .sort((a, b) => b.length - a.length)
+  .map(esc)
+  .join('|');
+const fam = FAMILIES.map(esc).join('|');
+const famDashedToName = new Map(FAMILIES.map((f) => [kebab(f), f]));
+const famDashed = [...famDashedToName.keys()]
+  .sort((a, b) => b.length - a.length)
+  .map(esc)
+  .join('|');
+
+// Same boundaries as eslint/rules/no-deprecated-tokens.js. A dotted name must
+// not be part of a longer path (`foo.primary.light`, `primary.lighter`), with
+// one exception: Chakra's own token references spell the path with a
+// `colors.` prefix — `{colors.success.main}` in a value string,
+// `token('colors.success.main')`, or a string that is exactly
+// `'colors.success.main'`. So `colors.` is accepted (and kept) when it starts
+// the string or follows `{`, a quote or `token(`.
+const PREFIX = `(?:(?<=^|[{'"\`]|token\\()(colors\\.)|(?<![\\w.-]))`;
+const ALIAS_RE = new RegExp(
+  `${PREFIX}(${dotted})(?![\\w-])|--chakra-colors-(${dashed})(?![\\w-])`,
+  'g'
+);
+const PRIMITIVE_RE = new RegExp(
+  `${PREFIX}(${fam})\\.(\\d+)(?![\\w.-])|--chakra-colors-(${famDashed})-(\\d+)(?![\\w-])`,
+  'g'
+);
+
+const LINK_ELEMENTS = new Set(['Link', 'a']);
+
+/**
+ * Rewrite one string. `ctx.linkColor` = it is the `color` attribute of a
+ * <Link>/<a>. Returns { text, renamed: [[from,to]], primitives: [name] }.
+ */
+const rewrite = (text, ctx = {}) => {
+  const renamed = [];
+  const primitives = [];
+  let out = text.replace(ALIAS_RE, (m, prefix, dot, dash) => {
+    const key = dot || dashedToKey.get(dash);
+    let to = ALIASES[key];
+    if (key === 'fg.accent' && ctx.linkColor) to = 'fg.link';
+    const repl = dot ? `${prefix || ''}${to}` : `--chakra-colors-${kebab(to)}`;
+    renamed.push([m, repl]);
+    return repl;
+  });
+  out = out.replace(PRIMITIVE_RE, (m, prefix, f1, s1, f2, s2) => {
+    const family = f1 || famDashedToName.get(f2);
+    const step = s1 || s2;
+    if (family === 'gray' && GRAY[step]) {
+      const to = GRAY[step];
+      const repl = f1 ? `${prefix || ''}${to}` : `--chakra-colors-${kebab(to)}`;
+      renamed.push([m, repl]);
+      return repl;
+    }
+    primitives.push(m);
+    return m;
+  });
+  return { text: out, renamed, primitives };
+};
+
+const isTypeLevel = (path) => {
+  for (let p = path.parent; p; p = p.parent) {
+    const t = p.node.type;
+    if (t === 'TSLiteralType') return true;
+    if (!t.startsWith('TS') && t !== 'TemplateLiteral') return false;
+  }
+  return false;
+};
+
+/** JSX attribute name + element name around a string, if any. */
+const jsxContext = (path) => {
+  let p = path.parent;
+  if (p && p.node.type === 'JSXExpressionContainer') p = p.parent;
+  if (!p || p.node.type !== 'JSXAttribute') return null;
+  const attr = p.node.name && p.node.name.name;
+  const opening = p.parent && p.parent.node;
+  const el =
+    opening && opening.name && opening.name.type === 'JSXIdentifier'
+      ? opening.name.name
+      : null;
+  return { attr, el };
+};
+
+function transform(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const reporter =
+    (options && options.__reporter) || createReporter(api, file, NAME);
+  let renames = 0;
+
+  const reportPrimitives = (node, names) => {
+    for (const name of names) {
+      reporter.site({
+        line: lineOf(node),
+        component: '-',
+        prop: name,
+        kind: 'primitive',
+        note: 'raw 4.x primitive removed in 5.0 — pick primary.*/neutral.N/status/category by use',
+        source: textOf(j, file, node),
+      });
+    }
+  };
+
+  const handleString = (path, node, value, apply) => {
+    if (typeof value !== 'string' || !value) return;
+    if (isTypeLevel(path)) return;
+    const parent = path.parent && path.parent.node;
+    if (parent && parent.type === 'ImportDeclaration') return;
+    const isKey =
+      (parent &&
+        (parent.type === 'ObjectProperty' ||
+          parent.type === 'Property' ||
+          parent.type === 'TSPropertySignature' ||
+          parent.type === 'ClassProperty') &&
+        parent.key === node) ||
+      ((parent.type === 'MemberExpression' ||
+        parent.type === 'OptionalMemberExpression') &&
+        parent.computed &&
+        parent.property === node);
+    const ctx = jsxContext(path);
+    const linkColor = !!(
+      ctx &&
+      ctx.attr === 'color' &&
+      LINK_ELEMENTS.has(ctx.el)
+    );
+    const r = rewrite(value, { linkColor });
+    if (isKey) {
+      for (const [from, to] of r.renamed) {
+        reporter.site({
+          line: lineOf(node),
+          component: '-',
+          prop: from,
+          kind: 'key',
+          note: `object key / computed access not renamed (→ ${to}?)`,
+          source: textOf(j, file, parent),
+        });
+      }
+      reportPrimitives(node, r.primitives);
+      return;
+    }
+    reportPrimitives(node, r.primitives);
+    if (r.renamed.length) {
+      apply(r.text);
+      renames += r.renamed.length;
+    }
+  };
+
+  // Collect before mutating: setStringLiteral turns nodes into `Literal`s.
+  const babelStrings = root.find(j.StringLiteral).paths();
+  // Other parsers (babel with estree, flow) yield ESTree `Literal`.
+  const estreeStrings = root
+    .find(j.Literal)
+    .filter(
+      (p) => p.node.type === 'Literal' && typeof p.node.value === 'string'
+    )
+    .paths();
+  for (const path of [...babelStrings, ...estreeStrings]) {
+    handleString(path, path.node, path.node.value, (t) =>
+      setStringLiteral(path.node, t)
+    );
+  }
+  root.find(j.TemplateElement).forEach((path) => {
+    const node = path.node;
+    // Rewrite `raw` (what is printed); recompute `cooked` from the same edit.
+    const raw = node.value.raw;
+    handleString(path, node, raw, (t) => {
+      const cooked = rewrite(node.value.cooked || '', {}).text;
+      node.value = { raw: t, cooked };
+    });
+  });
+
+  if (!renames) return undefined;
+  reporter.count('tokens renamed', renames);
+  return root.toSource();
+}
+
+module.exports = transform;
+module.exports.parser = 'tsx';
+module.exports.rewrite = rewrite;
+module.exports.kebab = kebab;

package/codemods/vitest.config.ts

@@ -0,0 +1,22 @@
+import path from 'path';
+import { defineConfig } from 'vitest/config';
+
+/**
+ * Codemod and ESLint-rule tests only. The root vitest.config.ts covers
+ * `src/**` with jsdom and React; the codemods (run by jscodeshift) and the
+ * eslint/ rules are Node-only CommonJS, so they get their own small config:
+ *
+ *   npx vitest run --config codemods/vitest.config.ts
+ */
+export default defineConfig({
+  root: path.resolve(__dirname, '..'),
+  test: {
+    environment: 'node',
+    globals: false,
+    include: ['codemods/**/*.test.ts', 'eslint/**/*.test.ts'],
+    exclude: ['node_modules', 'dist', 'codemods/**/__testfixtures__/**'],
+    testTimeout: 30000,
+  },
+  // The parity tests import the runtime legacy mappers from src/.
+  resolve: { alias: { '@': path.resolve(__dirname, '../src') } },
+});

package/dist/components/Avatar/Avatar.d.ts

@@ -1,12 +1,49 @@
 import { Avatar as ChakraAvatar, AvatarRootProps as ChakraAvatarRootProps } from '@chakra-ui/react';
+import { SystemHue } from '@/theme/colors';
 export type { AvatarFallbackProps, AvatarGroupProps, AvatarIconProps, AvatarImageProps, AvatarRootProps, } from '@chakra-ui/react';
 export type AvatarProps = ChakraAvatarRootProps & {
     src?: string;
     name?: string;
+    /**
+     * Overrides the hue the fallback initials are tinted — by default a stable
+     * hash of `name` picks one of the 12 `category.*` hues (see
+     * {@link hueForName}), so the same person reads as the same colour
+     * everywhere without a colour being stored anywhere. With no `name` and no
+     * `colorHue` the fallback is the neutral pair
+     * (`bg.muted` / `secondary.fgStrong`), not a hue.
+     */
+    colorHue?: SystemHue;
+};
+/**
+ * A stable hash of `name` into one of `SYSTEM_HUE_NAMES`, so a given name
+ * always lands on the same hue (no lookup table, nothing to keep in sync) and
+ * different names spread across the 12-hue wheel instead of clustering on
+ * one. Decorative only — `category.*` carries no status meaning — so a
+ * collision between two people's initials is a cosmetic coincidence, not a
+ * data bug.
+ */
+export declare function hueForName(name: string): SystemHue;
+export declare function hueForName(name: string | undefined): SystemHue | undefined;
+/**
+ * Fallback (initials / icon) colours: the person's hue when there is one,
+ * otherwise the neutral pair Badge `neutral` uses.
+ */
+export declare function avatarFallbackColors(name: string | undefined, colorHue?: SystemHue): {
+    bg: string;
+    color: string;
 };
 export declare const Avatar: import("react").ForwardRefExoticComponent<ChakraAvatar.RootProps & {
     src?: string;
     name?: string;
+    /**
+     * Overrides the hue the fallback initials are tinted — by default a stable
+     * hash of `name` picks one of the 12 `category.*` hues (see
+     * {@link hueForName}), so the same person reads as the same colour
+     * everywhere without a colour being stored anywhere. With no `name` and no
+     * `colorHue` the fallback is the neutral pair
+     * (`bg.muted` / `secondary.fgStrong`), not a hue.
+     */
+    colorHue?: SystemHue;
 } & import("react").RefAttributes<HTMLDivElement>> & {
     Root: import("react").ForwardRefExoticComponent<ChakraAvatar.RootProps & import("react").RefAttributes<HTMLDivElement>>;
     RootProvider: import("react").ForwardRefExoticComponent<import("node_modules/@chakra-ui/react/dist/types/components/avatar/avatar").AvatarRootProviderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,MAAM,IAAI,YAAY,EAOtB,eAAe,IAAI,qBAAqB,EAEzC,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,eAAe,GAChB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,WAAW,GAAG,qBAAqB,GAAG;IAChD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAuBF,eAAO,MAAM,MAAM;UAzBX,MAAM;WACL,MAAM;;;;;;;;;CAgCb,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,MAAM,IAAI,YAAY,EAOtB,eAAe,IAAI,qBAAqB,EAEzC,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAoB,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE7D,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,eAAe,GAChB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,WAAW,GAAG,qBAAqB,GAAG;IAChD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;AACpD,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAgB5E;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,QAAQ,CAAC,EAAE,SAAS,GACnB;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAI/B;AA4BD,eAAO,MAAM,MAAM;UA7EX,MAAM;WACL,MAAM;IACb;;;;;;;OAOG;eACQ,SAAS;;;;;;;;;CA2EpB,CAAC"}

package/dist/components/Avatar/Avatar.js

@@ -4,10 +4,37 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react = require('@chakra-ui/react');
+var colors = require('../../theme/colors.js');
 
+function hueForName(name) {
+    // No name, no identity to colour: `undefined` so the caller falls back to
+    // the neutral pair. `SYSTEM_HUE_NAMES[0]` is red, and a red placeholder
+    // avatar reads as an error state.
+    if (!name)
+        return undefined;
+    let hash = 0;
+    for (let i = 0; i < name.length; i += 1) {
+        // `| 0` keeps the running hash a 32-bit int so it can't grow unbounded
+        // over a long name before the modulo at the end.
+        hash = (hash * 31 + name.charCodeAt(i)) | 0;
+    }
+    const index = Math.abs(hash) % colors.SYSTEM_HUE_NAMES.length;
+    return colors.SYSTEM_HUE_NAMES[index];
+}
+/**
+ * Fallback (initials / icon) colours: the person's hue when there is one,
+ * otherwise the neutral pair Badge `neutral` uses.
+ */
+function avatarFallbackColors(name, colorHue) {
+    const hue = colorHue ?? hueForName(name);
+    if (!hue)
+        return { bg: 'bg.muted', color: 'secondary.fgStrong' };
+    return { bg: `category.${hue}.surface`, color: `category.${hue}.fg` };
+}
 const AvatarComponent = React.forwardRef((props, ref) => {
-    const { src, name, ...rest } = props;
-    return (jsxRuntime.jsxs(react.Avatar.Root, { ref: ref, borderWidth: "1px", borderColor: "border.subtle", overflow: "hidden", bgColor: "transparent", ...rest, children: [jsxRuntime.jsx(react.Avatar.Fallback, { name: name }), jsxRuntime.jsx(react.Avatar.Image, { src: src })] }));
+    const { src, name, colorHue, ...rest } = props;
+    const fallback = avatarFallbackColors(name, colorHue);
+    return (jsxRuntime.jsxs(react.Avatar.Root, { ref: ref, borderWidth: "1px", borderColor: "border.subtle", overflow: "hidden", bgColor: "transparent", ...rest, children: [jsxRuntime.jsx(react.Avatar.Fallback, { name: name, bg: fallback.bg, color: fallback.color }), jsxRuntime.jsx(react.Avatar.Image, { src: src })] }));
 });
 AvatarComponent.displayName = 'Avatar';
 const Avatar = Object.assign(AvatarComponent, {
@@ -21,4 +48,6 @@ const Avatar = Object.assign(AvatarComponent, {
 });
 
 exports.Avatar = Avatar;
+exports.avatarFallbackColors = avatarFallbackColors;
+exports.hueForName = hueForName;
 //# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsxs","ChakraAvatar","_jsx","AvatarRoot","AvatarRootProvider","AvatarFallback","AvatarImage","AvatarIcon","AvatarGroup","AvatarContext"],"mappings":";;;;;;;AA0BA,MAAM,eAAe,GAAGA,gBAAU,CAChC,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK;IACpC,QACEC,gBAACC,YAAY,CAAC,IAAI,EAAA,EAChB,GAAG,EAAE,GAAG,EACR,WAAW,EAAC,KAAK,EACjB,WAAW,EAAC,eAAe,EAC3B,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,aAAa,EAAA,GACjB,IAAI,aAERC,cAAA,CAACD,YAAY,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,EACrCC,cAAA,CAACD,YAAY,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA,EAAA,CACd;AAExB,CAAC,CACF;AAED,eAAe,CAAC,WAAW,GAAG,QAAQ;MAEzB,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;AACnD,IAAA,IAAI,EAAEE,gBAAU;AAChB,IAAA,YAAY,EAAEC,wBAAkB;AAChC,IAAA,QAAQ,EAAEC,oBAAc;AACxB,IAAA,KAAK,EAAEC,iBAAW;AAClB,IAAA,IAAI,EAAEC,gBAAU;AAChB,IAAA,KAAK,EAAEC,iBAAW;AAClB,IAAA,OAAO,EAAEC,mBAAa;AACvB,CAAA;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":[null],"names":["SYSTEM_HUE_NAMES","forwardRef","_jsxs","ChakraAvatar","_jsx","AvatarRoot","AvatarRootProvider","AvatarFallback","AvatarImage","AvatarIcon","AvatarGroup","AvatarContext"],"mappings":";;;;;;;;AA+CM,SAAU,UAAU,CAAC,IAAwB,EAAA;;;;AAIjD,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,SAAS;IAC3B,IAAI,IAAI,GAAG,CAAC;AACZ,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE;;;AAGvC,QAAA,IAAI,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAC7C;AACA,IAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAGA,uBAAgB,CAAC,MAAM;AACtD,IAAA,OAAOA,uBAAgB,CAAC,KAAK,CAAC;AAChC;AAEA;;;AAGG;AACG,SAAU,oBAAoB,CAClC,IAAwB,EACxB,QAAoB,EAAA;IAEpB,MAAM,GAAG,GAAG,QAAQ,IAAI,UAAU,CAAC,IAAI,CAAC;AACxC,IAAA,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,oBAAoB,EAAE;AAChE,IAAA,OAAO,EAAE,EAAE,EAAE,CAAA,SAAA,EAAY,GAAG,CAAA,QAAA,CAAU,EAAE,KAAK,EAAE,CAAA,SAAA,EAAY,GAAG,CAAA,GAAA,CAAK,EAAE;AACvE;AAEA,MAAM,eAAe,GAAGC,gBAAU,CAChC,CAAC,KAAK,EAAE,GAAG,KAAI;AACb,IAAA,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK;IAC9C,MAAM,QAAQ,GAAG,oBAAoB,CAAC,IAAI,EAAE,QAAQ,CAAC;AACrD,IAAA,QACEC,eAAA,CAACC,YAAY,CAAC,IAAI,EAAA,EAChB,GAAG,EAAE,GAAG,EACR,WAAW,EAAC,KAAK,EACjB,WAAW,EAAC,eAAe,EAC3B,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,aAAa,EAAA,GACjB,IAAI,EAAA,QAAA,EAAA,CAERC,cAAA,CAACD,YAAY,CAAC,QAAQ,EAAA,EACpB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,QAAQ,CAAC,EAAE,EACf,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAA,CACrB,EACFC,cAAA,CAACD,YAAY,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA,EAAA,CACd;AAExB,CAAC,CACF;AAED,eAAe,CAAC,WAAW,GAAG,QAAQ;MAEzB,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;AACnD,IAAA,IAAI,EAAEE,gBAAU;AAChB,IAAA,YAAY,EAAEC,wBAAkB;AAChC,IAAA,QAAQ,EAAEC,oBAAc;AACxB,IAAA,KAAK,EAAEC,iBAAW;AAClB,IAAA,IAAI,EAAEC,gBAAU;AAChB,IAAA,KAAK,EAAEC,iBAAW;AAClB,IAAA,OAAO,EAAEC,mBAAa;AACvB,CAAA;;;;;;"}

package/dist/components/Avatar/Avatar.mjs

@@ -2,10 +2,37 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Avatar as Avatar$1, AvatarContext, AvatarGroup, AvatarIcon, AvatarImage, AvatarFallback, AvatarRootProvider, AvatarRoot } from '@chakra-ui/react';
+import { SYSTEM_HUE_NAMES } from '../../theme/colors.mjs';
 
+function hueForName(name) {
+    // No name, no identity to colour: `undefined` so the caller falls back to
+    // the neutral pair. `SYSTEM_HUE_NAMES[0]` is red, and a red placeholder
+    // avatar reads as an error state.
+    if (!name)
+        return undefined;
+    let hash = 0;
+    for (let i = 0; i < name.length; i += 1) {
+        // `| 0` keeps the running hash a 32-bit int so it can't grow unbounded
+        // over a long name before the modulo at the end.
+        hash = (hash * 31 + name.charCodeAt(i)) | 0;
+    }
+    const index = Math.abs(hash) % SYSTEM_HUE_NAMES.length;
+    return SYSTEM_HUE_NAMES[index];
+}
+/**
+ * Fallback (initials / icon) colours: the person's hue when there is one,
+ * otherwise the neutral pair Badge `neutral` uses.
+ */
+function avatarFallbackColors(name, colorHue) {
+    const hue = colorHue ?? hueForName(name);
+    if (!hue)
+        return { bg: 'bg.muted', color: 'secondary.fgStrong' };
+    return { bg: `category.${hue}.surface`, color: `category.${hue}.fg` };
+}
 const AvatarComponent = forwardRef((props, ref) => {
-    const { src, name, ...rest } = props;
-    return (jsxs(Avatar$1.Root, { ref: ref, borderWidth: "1px", borderColor: "border.subtle", overflow: "hidden", bgColor: "transparent", ...rest, children: [jsx(Avatar$1.Fallback, { name: name }), jsx(Avatar$1.Image, { src: src })] }));
+    const { src, name, colorHue, ...rest } = props;
+    const fallback = avatarFallbackColors(name, colorHue);
+    return (jsxs(Avatar$1.Root, { ref: ref, borderWidth: "1px", borderColor: "border.subtle", overflow: "hidden", bgColor: "transparent", ...rest, children: [jsx(Avatar$1.Fallback, { name: name, bg: fallback.bg, color: fallback.color }), jsx(Avatar$1.Image, { src: src })] }));
 });
 AvatarComponent.displayName = 'Avatar';
 const Avatar = Object.assign(AvatarComponent, {
@@ -18,5 +45,5 @@ const Avatar = Object.assign(AvatarComponent, {
     Context: AvatarContext,
 });
 
-export { Avatar };
+export { Avatar, avatarFallbackColors, hueForName };
 //# sourceMappingURL=Avatar.mjs.map

package/dist/components/Avatar/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraAvatar","_jsx"],"mappings":";;;;;AA0BA,MAAM,eAAe,GAAG,UAAU,CAChC,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK;IACpC,QACEA,KAACC,QAAY,CAAC,IAAI,EAAA,EAChB,GAAG,EAAE,GAAG,EACR,WAAW,EAAC,KAAK,EACjB,WAAW,EAAC,eAAe,EAC3B,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,aAAa,EAAA,GACjB,IAAI,aAERC,GAAA,CAACD,QAAY,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,EACrCC,GAAA,CAACD,QAAY,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA,EAAA,CACd;AAExB,CAAC,CACF;AAED,eAAe,CAAC,WAAW,GAAG,QAAQ;MAEzB,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;AACnD,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,YAAY,EAAE,kBAAkB;AAChC,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,OAAO,EAAE,aAAa;AACvB,CAAA;;;;"}
+{"version":3,"file":"Avatar.mjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraAvatar","_jsx"],"mappings":";;;;;;AA+CM,SAAU,UAAU,CAAC,IAAwB,EAAA;;;;AAIjD,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,SAAS;IAC3B,IAAI,IAAI,GAAG,CAAC;AACZ,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE;;;AAGvC,QAAA,IAAI,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAC7C;AACA,IAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,gBAAgB,CAAC,MAAM;AACtD,IAAA,OAAO,gBAAgB,CAAC,KAAK,CAAC;AAChC;AAEA;;;AAGG;AACG,SAAU,oBAAoB,CAClC,IAAwB,EACxB,QAAoB,EAAA;IAEpB,MAAM,GAAG,GAAG,QAAQ,IAAI,UAAU,CAAC,IAAI,CAAC;AACxC,IAAA,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,oBAAoB,EAAE;AAChE,IAAA,OAAO,EAAE,EAAE,EAAE,CAAA,SAAA,EAAY,GAAG,CAAA,QAAA,CAAU,EAAE,KAAK,EAAE,CAAA,SAAA,EAAY,GAAG,CAAA,GAAA,CAAK,EAAE;AACvE;AAEA,MAAM,eAAe,GAAG,UAAU,CAChC,CAAC,KAAK,EAAE,GAAG,KAAI;AACb,IAAA,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK;IAC9C,MAAM,QAAQ,GAAG,oBAAoB,CAAC,IAAI,EAAE,QAAQ,CAAC;AACrD,IAAA,QACEA,IAAA,CAACC,QAAY,CAAC,IAAI,EAAA,EAChB,GAAG,EAAE,GAAG,EACR,WAAW,EAAC,KAAK,EACjB,WAAW,EAAC,eAAe,EAC3B,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,aAAa,EAAA,GACjB,IAAI,EAAA,QAAA,EAAA,CAERC,GAAA,CAACD,QAAY,CAAC,QAAQ,EAAA,EACpB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,QAAQ,CAAC,EAAE,EACf,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAA,CACrB,EACFC,GAAA,CAACD,QAAY,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA,EAAA,CACd;AAExB,CAAC,CACF;AAED,eAAe,CAAC,WAAW,GAAG,QAAQ;MAEzB,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;AACnD,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,YAAY,EAAE,kBAAkB;AAChC,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,OAAO,EAAE,aAAa;AACvB,CAAA;;;;"}

package/dist/components/Avatar/index.d.ts

@@ -1,3 +1,3 @@
 export type { AvatarFallbackProps, AvatarGroupProps, AvatarIconProps, AvatarImageProps, AvatarProps, AvatarRootProps, } from './Avatar';
-export { Avatar } from './Avatar';
+export { Avatar, avatarFallbackColors, hueForName } from './Avatar';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,WAAW,EACX,eAAe,GAChB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,WAAW,EACX,eAAe,GAChB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAoC9C,eAAO,MAAM,KAAK,6DAAgD,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAwC9C,eAAO,MAAM,KAAK,6DAAgD,CAAC"}

package/dist/components/Badge/Badge.js

@@ -8,20 +8,24 @@ var polymorphic = require('../../types/polymorphic.js');
 var Badge_styles = require('./Badge.styles.js');
 
 /**
- * Badge component with color variants using the Golden Ratio color system.
+ * Badge — a small, non-interactive label.
+ *
+ * `neutral` (default) is the grey-wash everyday badge; `success` / `warning` /
+ * `danger` / `info` report a status. For an unread/notification number use
+ * `CountBadge`; for a removable or selectable label use `Tag`.
  *
  * @example
  * ```tsx
- * <Badge>Default</Badge>
+ * <Badge>Pro</Badge>
  * <Badge variant="success">Completed</Badge>
  * <Badge variant="danger">Error</Badge>
  * <Badge variant="warning">Pending</Badge>
- * <Badge variant="secondary">Featured</Badge>
- * <Badge variant="neutral">Draft</Badge>
+ * <Badge variant="info">New</Badge>
  * ```
  */
-const BadgeImpl = React.forwardRef(({ textTransform = 'none', variant = 'primary', ...rest }, ref) => {
-    return (jsxRuntime.jsx(react.Badge, { ...Badge_styles.baseStyles, ...Badge_styles.variantStyles[variant], w: "fit-content", textTransform: textTransform, ...rest, ref: ref }));
+const BadgeImpl = React.forwardRef(({ textTransform = 'none', variant, ...rest }, ref) => {
+    const resolved = Badge_styles.resolveBadgeVariant(variant);
+    return (jsxRuntime.jsx(react.Badge, { ...Badge_styles.baseStyles, ...Badge_styles.variantStyles[resolved], w: "fit-content", textTransform: textTransform, ...rest, ref: ref }));
 });
 /** Type-level polymorphism over the same runtime — see the note on `Button`. */
 BadgeImpl.displayName = 'Badge';

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraBadge","baseStyles","variantStyles","polymorphic"],"mappings":";;;;;;;;;AAOA;;;;;;;;;;;;AAYG;AACH,MAAM,SAAS,GAAGA,gBAAU,CAC1B,CACE,EAAE,aAAa,GAAG,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,IAAI,EAAiB,EACvE,GAAqC,KACnC;IACF,QACEC,cAAA,CAACC,WAAW,EAAA,EAAA,GACNC,uBAAU,EAAA,GACVC,0BAAa,CAAC,OAAO,CAAC,EAC1B,CAAC,EAAC,aAAa,EACf,aAAa,EAAE,aAAa,EAAA,GACxB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC,CACF;AAED;AACA,SAAS,CAAC,WAAW,GAAG,OAAO;MAElB,KAAK,GAAGC,uBAAW,CAAwB,SAAS;;;;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":[null],"names":["forwardRef","resolveBadgeVariant","_jsx","ChakraBadge","baseStyles","variantStyles","polymorphic"],"mappings":";;;;;;;;;AAOA;;;;;;;;;;;;;;;AAeG;AACH,MAAM,SAAS,GAAGA,gBAAU,CAC1B,CACE,EAAE,aAAa,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAiB,EAC3D,GAAqC,KACnC;AACF,IAAA,MAAM,QAAQ,GAAGC,gCAAmB,CAAC,OAAO,CAAC;IAC7C,QACEC,cAAA,CAACC,WAAW,EAAA,EAAA,GACNC,uBAAU,EAAA,GACVC,0BAAa,CAAC,QAAQ,CAAC,EAC3B,CAAC,EAAC,aAAa,EACf,aAAa,EAAE,aAAa,EAAA,GACxB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC,CACF;AAED;AACA,SAAS,CAAC,WAAW,GAAG,OAAO;MAElB,KAAK,GAAGC,uBAAW,CAAwB,SAAS;;;;"}

package/dist/components/Badge/Badge.mjs

@@ -3,23 +3,27 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Badge as Badge$1 } from '@chakra-ui/react';
 import { polymorphic } from '../../types/polymorphic.mjs';
-import { variantStyles, baseStyles } from './Badge.styles.mjs';
+import { resolveBadgeVariant, variantStyles, baseStyles } from './Badge.styles.mjs';
 
 /**
- * Badge component with color variants using the Golden Ratio color system.
+ * Badge — a small, non-interactive label.
+ *
+ * `neutral` (default) is the grey-wash everyday badge; `success` / `warning` /
+ * `danger` / `info` report a status. For an unread/notification number use
+ * `CountBadge`; for a removable or selectable label use `Tag`.
  *
  * @example
  * ```tsx
- * <Badge>Default</Badge>
+ * <Badge>Pro</Badge>
  * <Badge variant="success">Completed</Badge>
  * <Badge variant="danger">Error</Badge>
  * <Badge variant="warning">Pending</Badge>
- * <Badge variant="secondary">Featured</Badge>
- * <Badge variant="neutral">Draft</Badge>
+ * <Badge variant="info">New</Badge>
  * ```
  */
-const BadgeImpl = forwardRef(({ textTransform = 'none', variant = 'primary', ...rest }, ref) => {
-    return (jsx(Badge$1, { ...baseStyles, ...variantStyles[variant], w: "fit-content", textTransform: textTransform, ...rest, ref: ref }));
+const BadgeImpl = forwardRef(({ textTransform = 'none', variant, ...rest }, ref) => {
+    const resolved = resolveBadgeVariant(variant);
+    return (jsx(Badge$1, { ...baseStyles, ...variantStyles[resolved], w: "fit-content", textTransform: textTransform, ...rest, ref: ref }));
 });
 /** Type-level polymorphism over the same runtime — see the note on `Button`. */
 BadgeImpl.displayName = 'Badge';

package/dist/components/Badge/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraBadge"],"mappings":";;;;;;;AAOA;;;;;;;;;;;;AAYG;AACH,MAAM,SAAS,GAAG,UAAU,CAC1B,CACE,EAAE,aAAa,GAAG,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,IAAI,EAAiB,EACvE,GAAqC,KACnC;IACF,QACEA,GAAA,CAACC,OAAW,EAAA,EAAA,GACN,UAAU,EAAA,GACV,aAAa,CAAC,OAAO,CAAC,EAC1B,CAAC,EAAC,aAAa,EACf,aAAa,EAAE,aAAa,EAAA,GACxB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC,CACF;AAED;AACA,SAAS,CAAC,WAAW,GAAG,OAAO;MAElB,KAAK,GAAG,WAAW,CAAwB,SAAS;;;;"}
+{"version":3,"file":"Badge.mjs","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraBadge"],"mappings":";;;;;;;AAOA;;;;;;;;;;;;;;;AAeG;AACH,MAAM,SAAS,GAAG,UAAU,CAC1B,CACE,EAAE,aAAa,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAiB,EAC3D,GAAqC,KACnC;AACF,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,OAAO,CAAC;IAC7C,QACEA,GAAA,CAACC,OAAW,EAAA,EAAA,GACN,UAAU,EAAA,GACV,aAAa,CAAC,QAAQ,CAAC,EAC3B,CAAC,EAAC,aAAa,EACf,aAAa,EAAE,aAAa,EAAA,GACxB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC,CACF;AAED;AACA,SAAS,CAAC,WAAW,GAAG,OAAO;MAElB,KAAK,GAAG,WAAW,CAAwB,SAAS;;;;"}

package/dist/components/Badge/Badge.styles.d.ts

@@ -1,8 +1,6 @@
 import { BadgeVariant } from './Badge.types';
 /**
- * Badge base styles using the Golden Ratio color system.
- *
- * These styles are shared across all badge variants.
+ * Badge base styles, shared by every variant.
  */
 export declare const baseStyles: {
     borderRadius: string;
@@ -11,8 +9,24 @@ export declare const baseStyles: {
     alignItems: string;
     justifyContent: string;
 };
+/**
+ * Badge colours per variant (5.0 BAZE tokens).
+ *
+ * `neutral` is a neutral `bg.muted` fill with `secondary.fgStrong` text — the
+ * sand tint (`secondary.surface`) is not a component background, so the
+ * secondary identity rides on the text only. The status variants use their family's soft
+ * `.bg` + `.fg`, which the contrast audit checks in both modes.
+ */
 export declare const variantStyles: Record<BadgeVariant, {
     bgColor: string;
     color: string;
 }>;
+/** Every 5.0 badge variant, in display order. */
+export declare const badgeVariants: BadgeVariant[];
+/**
+ * Resolve a (possibly 4.x) variant to a 5.0 one. `primary` / `secondary` and
+ * anything unknown fall back to `neutral`, warning once per value in
+ * development so a consumer's untyped call site still renders.
+ */
+export declare const resolveBadgeVariant: (variant: unknown) => BadgeVariant;
 //# sourceMappingURL=Badge.styles.d.ts.map

package/dist/components/Badge/Badge.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAChC,YAAY,EACZ;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAyDnC,CAAC"}
+{"version":3,"file":"Badge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAChC,YAAY,EACZ;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAsBnC,CAAC;AAEF,iDAAiD;AACjD,eAAO,MAAM,aAAa,EAAE,YAAY,EAMvC,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,SAAS,OAAO,KAAG,YAetD,CAAC"}