@zyncat/ui 0.11.0 → 0.12.0

package/dist/avatar.css

@@ -1,200 +1,205 @@
-/* Avatar (image - initials - icon) + AvatarGroup - face/status structure, token sizes, 6 identity slots. */
-
-.avatar {
-  --avatar-size: 2rem;
-  --avatar-bg: var(--bg-muted);
-  --avatar-fg: var(--text-muted);
-  /* --avatar-ring: injected by .avatar-group, cascades to .avatar__face */
-
-  position: relative;
-  display: inline-flex;
-  flex: none;
-  vertical-align: middle;
-  width: var(--avatar-size);
-  height: var(--avatar-size);
-}
-
-.avatar__face {
-  width: 100%;
-  height: 100%;
-  border-radius: var(--radius-full);
-  overflow: hidden;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background: var(--avatar-bg);
-  color: var(--avatar-fg);
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  /* Avatar (image - initials - icon) + AvatarGroup - face/status structure, token sizes, 6 identity slots. */
+
+  .avatar {
+    --avatar-size: 2rem;
+    --avatar-bg: var(--bg-muted);
+    --avatar-fg: var(--text-muted);
+    --avatar-edge: oklch(1 0 0 / 0.5);
+    /* --avatar-ring: injected by .avatar-group, cascades to .avatar__face */
+
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    vertical-align: middle;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+  }
 
-  /* sheen from top, shade from bottom over the slot tint; an image child paints over both (section B3 gradient exception) */
-  background:
-    linear-gradient(to bottom, var(--avatar-sheen), transparent 55%),
-    linear-gradient(to top, var(--avatar-shade), transparent 45%), var(--avatar-bg);
+  .avatar__face {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--radius-full);
+    overflow: hidden;
 
-  /* Crisp 1px edge-catch + optional group separator ring via cascade */
-  box-shadow:
-    inset 0 1px 0 0 oklch(1 0 0 / 0.5),
-    var(--avatar-ring, none);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-  /* keyline keyed to the slot's own hue (fg at low alpha), not uniform black; outline paints above children so it rings photos too */
-  outline: var(--border-hairline) solid color-mix(in oklch, var(--avatar-fg) 18%, transparent);
-  outline-offset: -1px;
+    background: var(--avatar-bg);
+    color: var(--avatar-fg);
 
-  transition: box-shadow var(--duration-fast) var(--ease-standard);
-}
+    /* sheen from top, shade from bottom over the slot tint; an image child paints over both (section B3 gradient exception) */
+    background:
+      linear-gradient(to bottom, var(--avatar-sheen), transparent 55%),
+      linear-gradient(to top, var(--avatar-shade), transparent 45%), var(--avatar-bg);
 
-.avatar__img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
+    /* Crisp 1px edge-catch + optional group separator ring via cascade */
+    box-shadow:
+      inset 0 1px 0 0 var(--avatar-edge),
+      var(--avatar-ring, none);
 
-/* lettermark, ratio-sized (section A7 exception); text-box trim = true optical centering; negative margin returns the trailing --tracking-caps so the pair stays centered */
-.avatar__initials {
-  font-family: var(--font-sans);
-  font-weight: var(--weight-semibold);
-  font-size: calc(var(--avatar-size) * 0.42);
-  line-height: 1;
-  text-box: trim-both cap alphabetic;
-  letter-spacing: var(--tracking-caps);
-  margin-right: calc(-1 * var(--tracking-caps));
-  text-transform: uppercase;
-  user-select: none;
-  -webkit-user-select: none;
-}
+    /* keyline keyed to the slot's own hue (fg at low alpha), not uniform black; outline paints above children so it rings photos too */
+    outline: var(--border-hairline) solid color-mix(in oklch, var(--avatar-fg) 18%, transparent);
+    outline-offset: -1px;
 
-.avatar__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 56%;
-  height: 56%;
-  opacity: 0.5;
-}
-.avatar__icon svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.avatar--xs {
-  --avatar-size: 1.25rem;
-}
-.avatar--sm {
-  --avatar-size: 1.5rem;
-}
-.avatar--lg {
-  --avatar-size: 2.5rem;
-}
-.avatar--xl {
-  --avatar-size: 3rem;
-}
+    transition: box-shadow var(--duration-fast) var(--ease-standard);
+  }
 
-/* square - radius scales with size (concentric nesting) */
-.avatar--square .avatar__face {
-  border-radius: var(--radius-md);
-}
+  .avatar__img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 
-.avatar--square.avatar--lg .avatar__face,
-.avatar--square.avatar--xl .avatar__face {
-  border-radius: var(--radius-lg);
-}
+  /* lettermark, ratio-sized (section A7 exception); text-box trim = true optical centering; negative margin returns the trailing --tracking-caps so the pair stays centered */
+  .avatar__initials {
+    font-family: var(--font-sans);
+    font-weight: var(--weight-semibold);
+    font-size: calc(var(--avatar-size) * 0.42);
+    line-height: 1;
+    text-box: trim-both cap alphabetic;
+    letter-spacing: var(--tracking-caps);
+    margin-right: calc(-1 * var(--tracking-caps));
+    text-transform: uppercase;
+    user-select: none;
+    -webkit-user-select: none;
+  }
 
-/* data-palette 1-6: identity slots (tokens/avatar.css); no attr = neutral; identity colouring, never status */
+  .avatar__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56%;
+    height: 56%;
+    opacity: 0.5;
+  }
+  .avatar__icon svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 
-.avatar[data-palette='1'] {
-  --avatar-bg: var(--avatar-1-bg);
-  --avatar-fg: var(--avatar-1-fg);
-}
-.avatar[data-palette='2'] {
-  --avatar-bg: var(--avatar-2-bg);
-  --avatar-fg: var(--avatar-2-fg);
-}
-.avatar[data-palette='3'] {
-  --avatar-bg: var(--avatar-3-bg);
-  --avatar-fg: var(--avatar-3-fg);
-}
-.avatar[data-palette='4'] {
-  --avatar-bg: var(--avatar-4-bg);
-  --avatar-fg: var(--avatar-4-fg);
-}
-.avatar[data-palette='5'] {
-  --avatar-bg: var(--avatar-5-bg);
-  --avatar-fg: var(--avatar-5-fg);
-}
-.avatar[data-palette='6'] {
-  --avatar-bg: var(--avatar-6-bg);
-  --avatar-fg: var(--avatar-6-fg);
-}
+  .avatar--xs {
+    --avatar-size: 1.25rem;
+  }
+  .avatar--sm {
+    --avatar-size: 1.5rem;
+  }
+  .avatar--lg {
+    --avatar-size: 2.5rem;
+  }
+  .avatar--xl {
+    --avatar-size: 3rem;
+  }
 
-/* status dot lives outside .avatar__face (which clips) so it's never cut; ~27% of size, min 6px */
+  /* square - radius scales with size (concentric nesting) */
+  .avatar--square .avatar__face {
+    border-radius: var(--radius-md);
+  }
 
-.avatar__status {
-  position: absolute;
-  bottom: 0;
-  right: 0;
+  .avatar--square.avatar--lg .avatar__face,
+  .avatar--square.avatar--xl .avatar__face {
+    border-radius: var(--radius-lg);
+  }
 
-  width: calc(var(--avatar-size) * 0.275);
-  height: calc(var(--avatar-size) * 0.275);
-  min-width: 6px;
-  min-height: 6px;
+  /* data-palette 1-6: identity slots (tokens/avatar.css); no attr = neutral; identity colouring, never status */
 
-  border-radius: var(--radius-full);
-  box-shadow: 0 0 0 2px var(--bg-surface);
-  transition: background-color var(--duration-fast) var(--ease-standard);
-}
+  .avatar[data-palette='1'] {
+    --avatar-bg: var(--avatar-1-bg);
+    --avatar-fg: var(--avatar-1-fg);
+  }
+  .avatar[data-palette='2'] {
+    --avatar-bg: var(--avatar-2-bg);
+    --avatar-fg: var(--avatar-2-fg);
+  }
+  .avatar[data-palette='3'] {
+    --avatar-bg: var(--avatar-3-bg);
+    --avatar-fg: var(--avatar-3-fg);
+  }
+  .avatar[data-palette='4'] {
+    --avatar-bg: var(--avatar-4-bg);
+    --avatar-fg: var(--avatar-4-fg);
+  }
+  .avatar[data-palette='5'] {
+    --avatar-bg: var(--avatar-5-bg);
+    --avatar-fg: var(--avatar-5-fg);
+  }
+  .avatar[data-palette='6'] {
+    --avatar-bg: var(--avatar-6-bg);
+    --avatar-fg: var(--avatar-6-fg);
+  }
 
-.avatar__status--online {
-  background: var(--success);
-}
-.avatar__status--away {
-  background: var(--warning);
-}
-.avatar__status--busy {
-  background: var(--danger);
-}
-.avatar__status--offline {
-  background: var(--border-strong);
-}
+  /* status dot lives outside .avatar__face (which clips) so it's never cut; ~27% of size, min 6px */
 
-.avatar-group {
-  display: inline-flex;
-  align-items: center;
-}
+  .avatar__status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+
+    width: calc(var(--avatar-size) * 0.275);
+    height: calc(var(--avatar-size) * 0.275);
+    min-width: 6px;
+    min-height: 6px;
+
+    border-radius: var(--radius-full);
+    box-shadow: 0 0 0 2px var(--bg-surface);
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
 
-/* inject --avatar-ring on group children - cascades to .avatar__face */
-.avatar-group > .avatar {
-  --avatar-ring: 0 0 0 2px var(--bg-surface);
-}
+  .avatar__status--online {
+    background: var(--success);
+  }
+  .avatar__status--away {
+    background: var(--warning);
+  }
+  .avatar__status--busy {
+    background: var(--danger);
+  }
+  .avatar__status--offline {
+    background: var(--border-strong);
+  }
 
-.avatar-group > .avatar + .avatar {
-  margin-left: calc(var(--avatar-size) * -0.3);
-  transition: margin-left var(--duration-base) var(--ease-entrance);
-}
+  .avatar-group {
+    display: inline-flex;
+    align-items: center;
+  }
 
-.avatar-group:hover > .avatar + .avatar {
-  margin-left: var(--space-1);
-}
+  /* inject --avatar-ring on group children - cascades to .avatar__face */
+  .avatar-group > .avatar {
+    --avatar-ring: 0 0 0 2px var(--bg-surface);
+  }
 
-/* "+N" chip - mono numerals, tracking off (mono is already spaced), smaller ratio to fit "+12" */
-.avatar--overflow .avatar__initials {
-  font-family: var(--font-mono);
-  font-variant-numeric: tabular-nums;
-  font-size: calc(var(--avatar-size) * 0.36);
-  letter-spacing: var(--tracking-normal);
-  margin-right: 0;
-}
+  .avatar-group > .avatar + .avatar {
+    margin-left: calc(var(--avatar-size) * -0.3);
+    transition: margin-left var(--duration-base) var(--ease-entrance);
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .avatar__face {
-    transition: none;
+  .avatar-group:hover > .avatar + .avatar {
+    margin-left: var(--space-1);
   }
-  .avatar__status {
-    transition: none;
+
+  /* "+N" chip - mono numerals, tracking off (mono is already spaced), smaller ratio to fit "+12" */
+  .avatar--overflow .avatar__initials {
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: calc(var(--avatar-size) * 0.36);
+    letter-spacing: var(--tracking-normal);
+    margin-right: 0;
   }
-  .avatar-group > .avatar + .avatar {
-    transition: none;
+
+  @media (prefers-reduced-motion: reduce) {
+    .avatar__face {
+      transition: none;
+    }
+    .avatar__status {
+      transition: none;
+    }
+    .avatar-group > .avatar + .avatar {
+      transition: none;
+    }
   }
 }

package/dist/avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/primitives/avatar/Avatar.tsx"],"names":[],"mappings":"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","file":"avatar.js","sourcesContent":["'use client';\n\nimport './avatar.css';\nimport { useState, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarShape = 'circle' | 'square';\nexport type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';\nexport type AvatarPaletteIndex = 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface AvatarOwnProps {\n  /** Image URL. Falls back to initials / icon / silhouette if absent or fails. */\n  src?: string | null;\n  /** Display name - drives initials generation, palette hash, and aria-label. */\n  name?: string | null;\n  /** Content override - any React node (e.g. <Icon name=\"globe\" />). */\n  icon?: ReactNode | null;\n  /** 'circle' for people; 'square' for channels / brand pages. Default 'circle'. */\n  shape?: AvatarShape;\n  /** Size step. Default 'md' (32 px). */\n  size?: AvatarSize;\n  /** Presence indicator dot at bottom-right. Default null (hidden). */\n  status?: AvatarStatus | null;\n  /** Override identity slot 1-6 (blue - violet - plum - rose - clay - moss); auto from name hash when null, neutral when anonymous. */\n  paletteIndex?: AvatarPaletteIndex | null;\n  /** Extra class(es) merged onto the root. */\n  className?: string;\n  /** Inline styles merged onto the root. */\n  style?: CSSProperties;\n}\n\nexport interface AvatarProps extends AvatarOwnProps {\n  /** Standard <span> attributes (onClick, title, data-*, ...) forwarded to the root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof AvatarOwnProps> & DataAttributes;\n}\n\nconst PALETTE_SLOTS = 6;\n\nfunction hashName(str: string) {\n  let h = 0;\n  for (let i = 0; i < str.length; i++) h = ((h << 5) - h + str.charCodeAt(i)) | 0;\n  return (Math.abs(h) % PALETTE_SLOTS) + 1;\n}\n\nfunction initialsOf(name: string | null, max: number) {\n  if (!name) return '';\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return '';\n  if (parts.length === 1 || max === 1) return parts[0][0].toUpperCase();\n  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\nfunction Silhouette() {\n  return (\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <circle cx=\"12\" cy=\"8.5\" r=\"3.8\" fill=\"currentColor\" />\n      <path d=\"M4 20.5C4 16.1 7.6 13 12 13s8 3.1 8 7.5\" fill=\"currentColor\" opacity=\"0.65\" />\n    </svg>\n  );\n}\n\nexport function Avatar({\n  src = null,\n  name = null,\n  icon = null,\n  shape = 'circle',\n  size = 'md',\n  status = null,\n  paletteIndex = null,\n  className = '',\n  style = {},\n  htmlProps,\n}: AvatarProps) {\n  const [imgError, setImgError] = useState(false);\n  const showImg = Boolean(src) && !imgError;\n\n  const maxInits = size === 'xs' ? 1 : 2;\n  const inits = initialsOf(name, maxInits);\n  const slot = paletteIndex ?? (name ? hashName(name) : null);\n\n  const cls = cx('avatar', size !== 'md' && `avatar--${size}`, shape === 'square' && 'avatar--square', className);\n\n  return (\n    <span\n      className={cls}\n      role={name ? 'img' : undefined}\n      aria-label={name || undefined}\n      data-palette={!showImg && slot != null ? slot : undefined}\n      style={style}\n      {...htmlProps}\n    >\n      <span className=\"avatar__face\">\n        {showImg && (\n          <img className=\"avatar__img\" src={src} alt={name || ''} onError={() => setImgError(true)} draggable={false} />\n        )}\n        {!showImg && icon && (\n          <span className=\"avatar__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        {!showImg && !icon && inits && (\n          <span className=\"avatar_initialsOf\" aria-hidden=\"true\">\n            {inits}\n          </span>\n        )}\n        {!showImg && !icon && !inits && (\n          <span className=\"avatar__icon\" aria-hidden=\"true\">\n            <Silhouette />\n          </span>\n        )}\n      </span>\n\n      {status && (\n        <span className={`avatar__status avatar__status--${status}`} role=\"img\" aria-label={status} title={status} />\n      )}\n    </span>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/primitives/avatar/Avatar.tsx"],"names":[],"mappings":";;;;;AAwCA,IAAM,aAAA,GAAgB,CAAA;AAEtB,SAAS,SAAS,GAAA,EAAa;AAC7B,EAAA,IAAI,CAAA,GAAI,CAAA;AACR,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,GAAA,CAAI,MAAA,EAAQ,CAAA,EAAA,EAAK,CAAA,GAAA,CAAM,CAAA,IAAK,CAAA,IAAK,CAAA,GAAI,GAAA,CAAI,UAAA,CAAW,CAAC,CAAA,GAAK,CAAA;AAC9E,EAAA,OAAQ,IAAA,CAAK,GAAA,CAAI,CAAC,CAAA,GAAI,aAAA,GAAiB,CAAA;AACzC;AAEA,SAAS,UAAA,CAAW,MAAqB,GAAA,EAAa;AACpD,EAAA,IAAI,CAAC,MAAM,OAAO,EAAA;AAClB,EAAA,MAAM,KAAA,GAAQ,KAAK,IAAA,EAAK,CAAE,MAAM,KAAK,CAAA,CAAE,OAAO,OAAO,CAAA;AACrD,EAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,EAAA;AAC/B,EAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,IAAK,GAAA,KAAQ,CAAA,EAAG,OAAO,KAAA,CAAM,CAAC,CAAA,CAAE,CAAC,CAAA,CAAE,WAAA,EAAY;AACpE,EAAA,OAAA,CAAQ,KAAA,CAAM,CAAC,CAAA,CAAE,CAAC,CAAA,GAAI,KAAA,CAAM,KAAA,CAAM,MAAA,GAAS,CAAC,CAAA,CAAE,CAAC,CAAA,EAAG,WAAA,EAAY;AAChE;AAEA,SAAS,UAAA,GAAa;AACpB,EAAA,4BACG,KAAA,EAAA,EAAI,OAAA,EAAQ,aAAY,KAAA,EAAM,4BAAA,EAA6B,eAAY,MAAA,EACtE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAA,EAAA,EAAO,IAAG,IAAA,EAAK,EAAA,EAAG,OAAM,CAAA,EAAE,KAAA,EAAM,MAAK,cAAA,EAAe,CAAA;AAAA,wBACpD,MAAA,EAAA,EAAK,CAAA,EAAE,2CAA0C,IAAA,EAAK,cAAA,EAAe,SAAQ,MAAA,EAAO;AAAA,GAAA,EACvF,CAAA;AAEJ;AAEO,SAAS,MAAA,CAAO;AAAA,EACrB,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,IAAA;AAAA,EACP,IAAA,GAAO,IAAA;AAAA,EACP,KAAA,GAAQ,QAAA;AAAA,EACR,IAAA,GAAO,IAAA;AAAA,EACP,MAAA,GAAS,IAAA;AAAA,EACT,YAAA,GAAe,IAAA;AAAA,EACf,SAAA,GAAY,EAAA;AAAA,EACZ,QAAQ,EAAC;AAAA,EACT;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,GAAG,CAAA,IAAK,CAAC,QAAA;AAEjC,EAAA,MAAM,QAAA,GAAW,IAAA,KAAS,IAAA,GAAO,CAAA,GAAI,CAAA;AACrC,EAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,IAAA,EAAM,QAAQ,CAAA;AACvC,EAAA,MAAM,IAAA,GAAO,YAAA,KAAiB,IAAA,GAAO,QAAA,CAAS,IAAI,CAAA,GAAI,IAAA,CAAA;AAEtD,EAAA,MAAM,GAAA,GAAM,EAAA,CAAG,QAAA,EAAU,IAAA,KAAS,IAAA,IAAQ,CAAA,QAAA,EAAW,IAAI,CAAA,CAAA,EAAI,KAAA,KAAU,QAAA,IAAY,gBAAA,EAAkB,SAAS,CAAA;AAE9G,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAA;AAAA,MACX,IAAA,EAAM,OAAO,KAAA,GAAQ,MAAA;AAAA,MACrB,cAAY,IAAA,IAAQ,MAAA;AAAA,MACpB,cAAA,EAAc,CAAC,OAAA,IAAW,IAAA,IAAQ,OAAO,IAAA,GAAO,MAAA;AAAA,MAChD,KAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,cAAA,EACb,QAAA,EAAA;AAAA,UAAA,OAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAc,KAAU,GAAA,EAAK,IAAA,IAAQ,EAAA,EAAI,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI,CAAA,EAAG,WAAW,KAAA,EAAO,CAAA;AAAA,UAE7G,CAAC,WAAW,IAAA,oBACX,GAAA,CAAC,UAAK,SAAA,EAAU,cAAA,EAAe,aAAA,EAAY,MAAA,EACxC,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,UAED,CAAC,OAAA,IAAW,CAAC,IAAA,IAAQ,KAAA,oBACpB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAC7C,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,CAAC,OAAA,IAAW,CAAC,IAAA,IAAQ,CAAC,KAAA,oBACrB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAA,EAAe,aAAA,EAAY,MAAA,EACzC,QAAA,kBAAA,GAAA,CAAC,cAAW,CAAA,EACd;AAAA,SAAA,EAEJ,CAAA;AAAA,QAEC,MAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,CAAA,+BAAA,EAAkC,MAAM,CAAA,CAAA,EAAI,IAAA,EAAK,KAAA,EAAM,YAAA,EAAY,MAAA,EAAQ,KAAA,EAAO,MAAA,EAAQ;AAAA;AAAA;AAAA,GAE/G;AAEJ","file":"avatar.js","sourcesContent":["'use client';\n\nimport './avatar.css';\n\nimport { useState, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarShape = 'circle' | 'square';\nexport type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';\nexport type AvatarPaletteIndex = 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface AvatarOwnProps {\n  /** Image URL. Falls back to initials / icon / silhouette if absent or fails. */\n  src?: string | null;\n  /** Display name - drives initials generation, palette hash, and aria-label. */\n  name?: string | null;\n  /** Content override - any React node (e.g. <Icon name=\"globe\" />). */\n  icon?: ReactNode | null;\n  /** 'circle' for people; 'square' for channels / brand pages. Default 'circle'. */\n  shape?: AvatarShape;\n  /** Size step. Default 'md' (32 px). */\n  size?: AvatarSize;\n  /** Presence indicator dot at bottom-right. Default null (hidden). */\n  status?: AvatarStatus | null;\n  /** Override identity slot 1-6 (blue - violet - plum - rose - clay - moss); auto from name hash when null, neutral when anonymous. */\n  paletteIndex?: AvatarPaletteIndex | null;\n  /** Extra class(es) merged onto the root. */\n  className?: string;\n  /** Inline styles merged onto the root. */\n  style?: CSSProperties;\n}\n\nexport interface AvatarProps extends AvatarOwnProps {\n  /** Standard <span> attributes (onClick, title, data-*, ...) forwarded to the root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof AvatarOwnProps> & DataAttributes;\n}\n\nconst PALETTE_SLOTS = 6;\n\nfunction hashName(str: string) {\n  let h = 0;\n  for (let i = 0; i < str.length; i++) h = ((h << 5) - h + str.charCodeAt(i)) | 0;\n  return (Math.abs(h) % PALETTE_SLOTS) + 1;\n}\n\nfunction initialsOf(name: string | null, max: number) {\n  if (!name) return '';\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return '';\n  if (parts.length === 1 || max === 1) return parts[0][0].toUpperCase();\n  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\nfunction Silhouette() {\n  return (\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <circle cx=\"12\" cy=\"8.5\" r=\"3.8\" fill=\"currentColor\" />\n      <path d=\"M4 20.5C4 16.1 7.6 13 12 13s8 3.1 8 7.5\" fill=\"currentColor\" opacity=\"0.65\" />\n    </svg>\n  );\n}\n\nexport function Avatar({\n  src = null,\n  name = null,\n  icon = null,\n  shape = 'circle',\n  size = 'md',\n  status = null,\n  paletteIndex = null,\n  className = '',\n  style = {},\n  htmlProps,\n}: AvatarProps) {\n  const [imgError, setImgError] = useState(false);\n  const showImg = Boolean(src) && !imgError;\n\n  const maxInits = size === 'xs' ? 1 : 2;\n  const inits = initialsOf(name, maxInits);\n  const slot = paletteIndex ?? (name ? hashName(name) : null);\n\n  const cls = cx('avatar', size !== 'md' && `avatar--${size}`, shape === 'square' && 'avatar--square', className);\n\n  return (\n    <span\n      className={cls}\n      role={name ? 'img' : undefined}\n      aria-label={name || undefined}\n      data-palette={!showImg && slot != null ? slot : undefined}\n      style={style}\n      {...htmlProps}\n    >\n      <span className=\"avatar__face\">\n        {showImg && (\n          <img className=\"avatar__img\" src={src} alt={name || ''} onError={() => setImgError(true)} draggable={false} />\n        )}\n        {!showImg && icon && (\n          <span className=\"avatar__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        {!showImg && !icon && inits && (\n          <span className=\"avatar_initialsOf\" aria-hidden=\"true\">\n            {inits}\n          </span>\n        )}\n        {!showImg && !icon && !inits && (\n          <span className=\"avatar__icon\" aria-hidden=\"true\">\n            <Silhouette />\n          </span>\n        )}\n      </span>\n\n      {status && (\n        <span className={`avatar__status avatar__status--${status}`} role=\"img\" aria-label={status} title={status} />\n      )}\n    </span>\n  );\n}\n"]}