@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260829085511 → 0.8.1-dev.20260829103736

package/dist/index.js

@@ -6542,72 +6542,51 @@ var Commentrenderer_default = CommentRenderer;
 // src/components/controls/view/AvatarView.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var AVATAR_COLORS = [
-  "#1abc9c",
-  "#2ecc71",
-  "#3498db",
-  "#9b59b6",
-  "#e67e22",
-  "#e74c3c",
-  "#16a085",
-  "#27ae60",
-  "#2980b9",
-  "#8e44ad",
-  "#f39c12",
-  "#d35400",
-  "#c0392b",
-  "#7f8c8d",
-  "#2c3e50"
+  "bg-error-strong",
+  "bg-accent-base",
+  "bg-warning-base",
+  "bg-success-base",
+  "bg-info-base",
+  "bg-primary-base",
+  "bg-secondary-base"
 ];
-var hashString = (text) => {
+var getAvatarColor = (text) => {
   let hash = 0;
   for (let i = 0; i < text.length; i += 1) {
-    hash = (hash << 5) - hash + text.charCodeAt(i);
-    hash |= 0;
+    hash = hash * 31 + text.charCodeAt(i) >>> 0;
   }
-  return Math.abs(hash);
+  return AVATAR_COLORS[hash % AVATAR_COLORS.length];
 };
 var getInitials = (text) => {
   const words = text.trim().split(/\s+/).filter(Boolean);
   if (words.length === 0) {
-    return "";
+    return "?";
   }
   if (words.length === 1) {
     return words[0].slice(0, 2).toUpperCase();
   }
-  return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+  return `${words[0][0]}${words[words.length - 1][0]}`.toUpperCase();
 };
 var AvatarView = (props) => {
   const text = props.value === null || props.value === void 0 ? "" : String(props.value).trim();
   if (!text) {
     return null;
   }
-  const initials = getInitials(text);
-  const backgroundColor = AVATAR_COLORS[hashString(text) % AVATAR_COLORS.length];
-  const size = props.width ?? "2rem";
+  const size = props.width ?? "1.75rem";
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "span",
     {
-      className: "avatar-view",
+      className: `avatar-view inline-flex flex-shrink-0 items-center justify-center rounded-full font-semibold uppercase select-none overflow-hidden ${getAvatarColor(text)}`,
       title: text,
       "aria-label": text,
       style: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
         width: size,
         height: size,
-        borderRadius: "9999px",
-        backgroundColor,
-        color: "#fff",
-        fontWeight: 600,
-        fontSize: "0.75em",
-        lineHeight: 1,
-        textTransform: "uppercase",
-        userSelect: "none",
-        flexShrink: 0,
-        overflow: "hidden"
+        fontSize: "0.6875rem",
+        letterSpacing: "0.02em",
+        lineHeight: 1
       },
-      children: initials
+      children: getInitials(text)
     }
   );
 };

package/dist/index.mjs

@@ -420,72 +420,51 @@ var Commentrenderer_default = CommentRenderer;
 // src/components/controls/view/AvatarView.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 var AVATAR_COLORS = [
-  "#1abc9c",
-  "#2ecc71",
-  "#3498db",
-  "#9b59b6",
-  "#e67e22",
-  "#e74c3c",
-  "#16a085",
-  "#27ae60",
-  "#2980b9",
-  "#8e44ad",
-  "#f39c12",
-  "#d35400",
-  "#c0392b",
-  "#7f8c8d",
-  "#2c3e50"
+  "bg-error-strong",
+  "bg-accent-base",
+  "bg-warning-base",
+  "bg-success-base",
+  "bg-info-base",
+  "bg-primary-base",
+  "bg-secondary-base"
 ];
-var hashString = (text) => {
+var getAvatarColor = (text) => {
   let hash = 0;
   for (let i = 0; i < text.length; i += 1) {
-    hash = (hash << 5) - hash + text.charCodeAt(i);
-    hash |= 0;
+    hash = hash * 31 + text.charCodeAt(i) >>> 0;
   }
-  return Math.abs(hash);
+  return AVATAR_COLORS[hash % AVATAR_COLORS.length];
 };
 var getInitials = (text) => {
   const words = text.trim().split(/\s+/).filter(Boolean);
   if (words.length === 0) {
-    return "";
+    return "?";
   }
   if (words.length === 1) {
     return words[0].slice(0, 2).toUpperCase();
   }
-  return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+  return `${words[0][0]}${words[words.length - 1][0]}`.toUpperCase();
 };
 var AvatarView = (props) => {
   const text = props.value === null || props.value === void 0 ? "" : String(props.value).trim();
   if (!text) {
     return null;
   }
-  const initials = getInitials(text);
-  const backgroundColor = AVATAR_COLORS[hashString(text) % AVATAR_COLORS.length];
-  const size = props.width ?? "2rem";
+  const size = props.width ?? "1.75rem";
   return /* @__PURE__ */ jsx15(
     "span",
     {
-      className: "avatar-view",
+      className: `avatar-view inline-flex flex-shrink-0 items-center justify-center rounded-full font-semibold uppercase select-none overflow-hidden ${getAvatarColor(text)}`,
       title: text,
       "aria-label": text,
       style: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
         width: size,
         height: size,
-        borderRadius: "9999px",
-        backgroundColor,
-        color: "#fff",
-        fontWeight: 600,
-        fontSize: "0.75em",
-        lineHeight: 1,
-        textTransform: "uppercase",
-        userSelect: "none",
-        flexShrink: 0,
-        overflow: "hidden"
+        fontSize: "0.6875rem",
+        letterSpacing: "0.02em",
+        lineHeight: 1
       },
-      children: initials
+      children: getInitials(text)
     }
   );
 };

package/dist/server.js

@@ -6881,72 +6881,51 @@ var Commentrenderer_default = CommentRenderer;
 // src/components/controls/view/AvatarView.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var AVATAR_COLORS = [
-  "#1abc9c",
-  "#2ecc71",
-  "#3498db",
-  "#9b59b6",
-  "#e67e22",
-  "#e74c3c",
-  "#16a085",
-  "#27ae60",
-  "#2980b9",
-  "#8e44ad",
-  "#f39c12",
-  "#d35400",
-  "#c0392b",
-  "#7f8c8d",
-  "#2c3e50"
+  "bg-error-strong",
+  "bg-accent-base",
+  "bg-warning-base",
+  "bg-success-base",
+  "bg-info-base",
+  "bg-primary-base",
+  "bg-secondary-base"
 ];
-var hashString = (text) => {
+var getAvatarColor = (text) => {
   let hash = 0;
   for (let i = 0; i < text.length; i += 1) {
-    hash = (hash << 5) - hash + text.charCodeAt(i);
-    hash |= 0;
+    hash = hash * 31 + text.charCodeAt(i) >>> 0;
   }
-  return Math.abs(hash);
+  return AVATAR_COLORS[hash % AVATAR_COLORS.length];
 };
 var getInitials = (text) => {
   const words = text.trim().split(/\s+/).filter(Boolean);
   if (words.length === 0) {
-    return "";
+    return "?";
   }
   if (words.length === 1) {
     return words[0].slice(0, 2).toUpperCase();
   }
-  return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+  return `${words[0][0]}${words[words.length - 1][0]}`.toUpperCase();
 };
 var AvatarView = (props) => {
   const text = props.value === null || props.value === void 0 ? "" : String(props.value).trim();
   if (!text) {
     return null;
   }
-  const initials = getInitials(text);
-  const backgroundColor = AVATAR_COLORS[hashString(text) % AVATAR_COLORS.length];
-  const size = props.width ?? "2rem";
+  const size = props.width ?? "1.75rem";
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "span",
     {
-      className: "avatar-view",
+      className: `avatar-view inline-flex flex-shrink-0 items-center justify-center rounded-full font-semibold uppercase select-none overflow-hidden ${getAvatarColor(text)}`,
       title: text,
       "aria-label": text,
       style: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
         width: size,
         height: size,
-        borderRadius: "9999px",
-        backgroundColor,
-        color: "#fff",
-        fontWeight: 600,
-        fontSize: "0.75em",
-        lineHeight: 1,
-        textTransform: "uppercase",
-        userSelect: "none",
-        flexShrink: 0,
-        overflow: "hidden"
+        fontSize: "0.6875rem",
+        letterSpacing: "0.02em",
+        lineHeight: 1
       },
-      children: initials
+      children: getInitials(text)
     }
   );
 };

package/dist/server.mjs

@@ -751,72 +751,51 @@ var Commentrenderer_default = CommentRenderer;
 // src/components/controls/view/AvatarView.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
 var AVATAR_COLORS = [
-  "#1abc9c",
-  "#2ecc71",
-  "#3498db",
-  "#9b59b6",
-  "#e67e22",
-  "#e74c3c",
-  "#16a085",
-  "#27ae60",
-  "#2980b9",
-  "#8e44ad",
-  "#f39c12",
-  "#d35400",
-  "#c0392b",
-  "#7f8c8d",
-  "#2c3e50"
+  "bg-error-strong",
+  "bg-accent-base",
+  "bg-warning-base",
+  "bg-success-base",
+  "bg-info-base",
+  "bg-primary-base",
+  "bg-secondary-base"
 ];
-var hashString = (text) => {
+var getAvatarColor = (text) => {
   let hash = 0;
   for (let i = 0; i < text.length; i += 1) {
-    hash = (hash << 5) - hash + text.charCodeAt(i);
-    hash |= 0;
+    hash = hash * 31 + text.charCodeAt(i) >>> 0;
   }
-  return Math.abs(hash);
+  return AVATAR_COLORS[hash % AVATAR_COLORS.length];
 };
 var getInitials = (text) => {
   const words = text.trim().split(/\s+/).filter(Boolean);
   if (words.length === 0) {
-    return "";
+    return "?";
   }
   if (words.length === 1) {
     return words[0].slice(0, 2).toUpperCase();
   }
-  return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+  return `${words[0][0]}${words[words.length - 1][0]}`.toUpperCase();
 };
 var AvatarView = (props) => {
   const text = props.value === null || props.value === void 0 ? "" : String(props.value).trim();
   if (!text) {
     return null;
   }
-  const initials = getInitials(text);
-  const backgroundColor = AVATAR_COLORS[hashString(text) % AVATAR_COLORS.length];
-  const size = props.width ?? "2rem";
+  const size = props.width ?? "1.75rem";
   return /* @__PURE__ */ jsx21(
     "span",
     {
-      className: "avatar-view",
+      className: `avatar-view inline-flex flex-shrink-0 items-center justify-center rounded-full font-semibold uppercase select-none overflow-hidden ${getAvatarColor(text)}`,
       title: text,
       "aria-label": text,
       style: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
         width: size,
         height: size,
-        borderRadius: "9999px",
-        backgroundColor,
-        color: "#fff",
-        fontWeight: 600,
-        fontSize: "0.75em",
-        lineHeight: 1,
-        textTransform: "uppercase",
-        userSelect: "none",
-        flexShrink: 0,
-        overflow: "hidden"
+        fontSize: "0.6875rem",
+        letterSpacing: "0.02em",
+        lineHeight: 1
       },
-      children: initials
+      children: getInitials(text)
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clyrex-digital/clyrex-controls-dev",
-  "version": "0.8.1-dev.20260829085511",
+  "version": "0.8.1-dev.20260829103736",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",