@k2b/ui 0.13.0 → 0.15.0

package/dist/ssr/surfaces/Avatar.js

@@ -15,6 +15,19 @@ const initialsFor = name => {
   if (parts.length === 1) return parts[0]?.slice(0, 2).toUpperCase() ?? "?";
   return `${parts[0]?.[0] ?? ""}${parts.at(-1)?.[0] ?? ""}`.toUpperCase();
 };
+
+/** Tints behind initials, as many as `.k2b-avatar[data-tint]` rules in the stylesheet. */
+const TINTS = 10;
+
+/**
+ * The tint behind initials and icons, from the name, so the same name has one color wherever an avatar shows it. The
+ * hash is the one of `@k2b/stdlib`'s generated avatar.
+ */
+const tintFor = name => {
+  let hash = 0;
+  for (let index = 0; index < name.length; index++) hash = hash * 31 + name.charCodeAt(index) >>> 0;
+  return hash % TINTS;
+};
 export function Avatar(props) {
   const messages = useUiMessages();
   const [failed, setFailed] = createSignal(false);
@@ -32,7 +45,7 @@ export function Avatar(props) {
       return _$memo(() => !!!failed())() ? props.src || undefined : undefined;
     },
     get fallback() {
-      return _$ssr(_tmpl$2, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("data-size", _$escape(props.size ?? "md", true), false), _$ssrStyle(props.style), _$ssrAttribute("aria-label", _$escape(props.alt ?? messages().avatarLabel({
+      return _$ssr(_tmpl$2, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("data-size", _$escape(props.size ?? "md", true), false) + _$ssrAttribute("data-tint", _$escape(tintFor(props.name.trim()), true), false), _$ssrStyle(props.style), _$ssrAttribute("aria-label", _$escape(props.alt ?? messages().avatarLabel({
         name: label()
       }), true), false), _$escape(fallbackContent()));
     },

package/dist/ssr/surfaces/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/Avatar.tsx"],"sourcesContent":["import { createEffect, createSignal, type JSX, on, Show } from \"solid-js\";\nimport { useUiMessages } from \"../intl/messages\";\n\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport type AvatarProps = {\n  name: string;\n  src?: string | null;\n  icon?: string;\n  alt?: string;\n  fallback?: string;\n  size?: AvatarSize;\n  loading?: \"eager\" | \"lazy\";\n  class?: string;\n  style?: JSX.CSSProperties | string;\n};\n\nconst initialsFor = (name: string): string => {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return \"?\";\n  if (parts.length === 1) return parts[0]?.slice(0, 2).toUpperCase() ?? \"?\";\n  return `${parts[0]?.[0] ?? \"\"}${parts.at(-1)?.[0] ?? \"\"}`.toUpperCase();\n};\n\nexport function Avatar(props: AvatarProps): JSX.Element {\n  const messages = useUiMessages();\n  const [failed, setFailed] = createSignal(false);\n  const label = () => props.name.trim() || messages().unknownUser;\n  // Derive initials from the given name, not from the accessible-name fallback:\n  // an empty `name` must render \"?\" the way Cloud's avatar does, not \"UU\".\n  const fallback = () => props.fallback ?? initialsFor(props.name);\n  const fallbackContent = () => (props.icon ? <i class={props.icon} aria-hidden=\"true\" /> : fallback());\n  const className = () => `k2b-avatar ${props.class ?? \"\"}`;\n\n  createEffect(\n    on(\n      () => props.src,\n      () => setFailed(false),\n      { defer: true },\n    ),\n  );\n\n  return (\n    <Show\n      when={!failed() ? props.src || undefined : undefined}\n      fallback={\n        <span\n          class={className()}\n          data-size={props.size ?? \"md\"}\n          style={props.style}\n          role=\"img\"\n          aria-label={props.alt ?? messages().avatarLabel({ name: label() })}\n        >\n          {fallbackContent()}\n        </span>\n      }\n    >\n      {(src) => (\n        <img\n          src={src()}\n          alt={props.alt ?? messages().avatarLabel({ name: label() })}\n          class={className()}\n          data-size={props.size ?? \"md\"}\n          style={props.style}\n          loading={props.loading ?? \"lazy\"}\n          decoding=\"async\"\n          onError={() => setFailed(true)}\n        />\n      )}\n    </Show>\n  );\n}\n"],"mappings":";;;;;;;;;AAAA,SAAS,YAAY,EAAE,YAAY,EAAY,EAAE,EAAE,IAAI,QAAQ,UAAU;AACzE,SAAS,aAAa,QAAQ,kBAAkB;AAgBhD,MAAM,WAAW,GAAI,IAAY,IAAa;EAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;EACtD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,OAAO,GAAG;EAClC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,GAAG;EACzE,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC;AACzE,CAAC;AAED,OAAO,SAAS,MAAM,CAAC,KAAkB,EAAe;EACtD,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC;EAC/C,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,WAAW;EAC/D;EACA;EACA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,IAAI,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC;EAChE,MAAM,eAAe,GAAG,MAAO,KAAK,CAAC,IAAI,kDAAa,KAAK,CAAC,IAAI,mBAA0B,QAAQ,CAAC,CAAE;EACrG,MAAM,SAAS,GAAG,MAAM,cAAc,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;EAEzD,YAAY,CACV,EAAE,CACA,MAAM,KAAK,CAAC,GAAG,EACf,MAAM,SAAS,CAAC,KAAK,CAAC,EACtB;IAAE,KAAK,EAAE;EAAK,CAChB,CACF,CAAC;EAED,yBACG,IAAI;IAAA,IACH,IAAI;MAAA,OAAE,gBAAC,MAAM,CAAC,CAAC,MAAG,KAAK,CAAC,GAAG,IAAI,SAAS,GAAG,SAAS;IAAA;IAAA,IACpD,QAAQ;MAAA,uDAEG,SAAS,CAAC,CAAC,uDACP,KAAK,CAAC,IAAI,IAAI,IAAI,4BACtB,KAAK,CAAC,KAAK,yCAEN,KAAK,CAAC,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC;QAAE,IAAI,EAAE,KAAK,CAAC;MAAE,CAAC,CAAC,0BAEjE,eAAe,CAAC,CAAC;IAAA;IAAA,UAIpB,GAAG,kDAEI,GAAG,CAAC,CAAC,iDACL,KAAK,CAAC,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC;MAAE,IAAI,EAAE,KAAK,CAAC;IAAE,CAAC,CAAC,mDACpD,SAAS,CAAC,CAAC,uDACP,KAAK,CAAC,IAAI,IAAI,IAAI,4BACtB,KAAK,CAAC,KAAK,sCACT,KAAK,CAAC,OAAO,IAAI,MAAM;EAInC;AAGP","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/Avatar.tsx"],"sourcesContent":["import { createEffect, createSignal, type JSX, on, Show } from \"solid-js\";\nimport { useUiMessages } from \"../intl/messages\";\n\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport type AvatarProps = {\n  name: string;\n  src?: string | null;\n  icon?: string;\n  alt?: string;\n  fallback?: string;\n  size?: AvatarSize;\n  loading?: \"eager\" | \"lazy\";\n  class?: string;\n  style?: JSX.CSSProperties | string;\n};\n\nconst initialsFor = (name: string): string => {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return \"?\";\n  if (parts.length === 1) return parts[0]?.slice(0, 2).toUpperCase() ?? \"?\";\n  return `${parts[0]?.[0] ?? \"\"}${parts.at(-1)?.[0] ?? \"\"}`.toUpperCase();\n};\n\n/** Tints behind initials, as many as `.k2b-avatar[data-tint]` rules in the stylesheet. */\nconst TINTS = 10;\n\n/**\n * The tint behind initials and icons, from the name, so the same name has one color wherever an avatar shows it. The\n * hash is the one of `@k2b/stdlib`'s generated avatar.\n */\nconst tintFor = (name: string): number => {\n  let hash = 0;\n  for (let index = 0; index < name.length; index++) hash = (hash * 31 + name.charCodeAt(index)) >>> 0;\n  return hash % TINTS;\n};\n\nexport function Avatar(props: AvatarProps): JSX.Element {\n  const messages = useUiMessages();\n  const [failed, setFailed] = createSignal(false);\n  const label = () => props.name.trim() || messages().unknownUser;\n  // Derive initials from the given name, not from the accessible-name fallback:\n  // an empty `name` must render \"?\" the way Cloud's avatar does, not \"UU\".\n  const fallback = () => props.fallback ?? initialsFor(props.name);\n  const fallbackContent = () => (props.icon ? <i class={props.icon} aria-hidden=\"true\" /> : fallback());\n  const className = () => `k2b-avatar ${props.class ?? \"\"}`;\n\n  createEffect(\n    on(\n      () => props.src,\n      () => setFailed(false),\n      { defer: true },\n    ),\n  );\n\n  return (\n    <Show\n      when={!failed() ? props.src || undefined : undefined}\n      fallback={\n        <span\n          class={className()}\n          data-size={props.size ?? \"md\"}\n          data-tint={tintFor(props.name.trim())}\n          style={props.style}\n          role=\"img\"\n          aria-label={props.alt ?? messages().avatarLabel({ name: label() })}\n        >\n          {fallbackContent()}\n        </span>\n      }\n    >\n      {(src) => (\n        <img\n          src={src()}\n          alt={props.alt ?? messages().avatarLabel({ name: label() })}\n          class={className()}\n          data-size={props.size ?? \"md\"}\n          style={props.style}\n          loading={props.loading ?? \"lazy\"}\n          decoding=\"async\"\n          onError={() => setFailed(true)}\n        />\n      )}\n    </Show>\n  );\n}\n"],"mappings":"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","ignoreList":[]}