@alfadocs/ui-kit-debug 1.90.1 → 1.91.0

package/dist/_chunks/avatar-BPiPL7ND.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"avatar-BPiPL7ND.js","sources":["../../src/components/avatar/avatar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { composeRefs } from '../_shared/compose-refs';\nimport { useIsomorphicLayoutEffect } from '../../hooks/use-isomorphic-layout-effect';\n\n// ── Hash ──────────────────────────────────────────────────────────────────────\n\n/** djb2 hash — fast, unsigned 32-bit, stable across calls. */\nfunction djb2(str: string): number {\n  let hash = 5381;\n  for (let i = 0; i < str.length; i++) {\n    hash = ((hash << 5) + hash) ^ str.charCodeAt(i);\n    hash = hash >>> 0; // coerce to unsigned 32-bit integer\n  }\n  return hash;\n}\n\n/**\n * 16 brand hues. All reach ≥ 4.5 : 1 against the initials text: white\n * (var(--primary-foreground)) in the light themes and --color-grey-50 in\n * both dark themes, which pin --primary-foreground to navy. The lowest pair\n * is blue-300 with grey-50, at 4.60 : 1. Spans four distinct hue families\n * for good visual distribution.\n *\n *  Index | Token                  | Contrast  | Visual character\n *  0     | --color-violet-500     | 4.74 : 1  | bright violet\n *  1     | --color-violet-600     | 5.53 : 1  | medium violet\n *  2     | --color-violet-700     | 7.29 : 1  | dark violet\n *  3     | --color-violet-800     | 9.57 : 1  | deep violet\n *  4     | --color-violet-900     | 12.06 : 1 | midnight violet\n *  5     | --color-purple-700     | 5.21 : 1  | medium purple\n *  6     | --color-purple-800     | 7.52 : 1  | dark purple\n *  7     | --color-purple-900     | 10.40 : 1 | deep purple\n *  8     | --color-magenta-700    | 6.01 : 1  | vivid magenta\n *  9     | --color-magenta-800    | 8.05 : 1  | dark magenta\n *  10    | --color-magenta-900    | 11.20 : 1 | deep magenta\n *  11    | --color-blue-300       | 4.64 : 1  | slate / steel blue\n *  12    | --color-blue-400       | 6.95 : 1  | medium slate\n *  13    | --color-blue-500       | 13.00 : 1 | deep navy\n *  14    | --color-blue-700       | 17.82 : 1 | midnight navy\n *  15    | --color-grey-900       | 5.78 : 1  | warm charcoal\n */\nconst INITIALS_BG_CLASSES = [\n  'ds:bg-[var(--color-violet-500)]',\n  'ds:bg-[var(--color-violet-600)]',\n  'ds:bg-[var(--color-violet-700)]',\n  'ds:bg-[var(--color-violet-800)]',\n  'ds:bg-[var(--color-violet-900)]',\n  'ds:bg-[var(--color-purple-700)]',\n  'ds:bg-[var(--color-purple-800)]',\n  'ds:bg-[var(--color-purple-900)]',\n  'ds:bg-[var(--color-magenta-700)]',\n  'ds:bg-[var(--color-magenta-800)]',\n  'ds:bg-[var(--color-magenta-900)]',\n  'ds:bg-[var(--color-blue-300)]',\n  'ds:bg-[var(--color-blue-400)]',\n  'ds:bg-[var(--color-blue-500)]',\n  'ds:bg-[var(--color-blue-700)]',\n  'ds:bg-[var(--color-grey-900)]',\n] as const;\n\n/** Deterministically maps a name string to one of 16 brand-hue Tailwind classes. Same name always produces the same class. */\nexport function nameToColorClass(name: string): string {\n  return INITIALS_BG_CLASSES[djb2(name) % INITIALS_BG_CLASSES.length];\n}\n\n/**\n * Extracts 1–2 uppercase initials:\n * - Single-word name: first two characters  (\"John\" → \"JO\")\n * - Multi-word name: first char of first word + first char of last word  (\"John Doe\" → \"JD\")\n * - Parenthesised or bracketed parts and words with no letter are skipped\n *   (\"Lucy Danvers (daughter)\" → \"LD\"), unless nothing else is left.\n */\nexport function getInitials(name: string): string {\n  const toWords = (text: string) =>\n    text\n      .trim()\n      .split(/\\s+/)\n      .map((word) => word.replace(/^[^\\p{L}\\p{N}]+|[^\\p{L}\\p{N}]+$/gu, ''))\n      .filter((word) => /\\p{L}/u.test(word));\n  const outside = toWords(name.replace(/\\([^)]*\\)|\\[[^\\]]*\\]/g, ' '));\n  const words = outside.length > 0 ? outside : toWords(name);\n  if (words.length === 0) return '';\n  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();\n  return (words[0][0] + words[words.length - 1][0]).toUpperCase();\n}\n\n// ── CVA ───────────────────────────────────────────────────────────────────────\n\nconst avatarVariants = cva(\n  [\n    'ds:relative ds:inline-flex ds:shrink-0 ds:select-none ds:items-center ds:justify-center ds:overflow-hidden',\n    // Focus ring — uses design-system tokens so theme overrides (accessible: 3px) apply automatically.\n    // The ring renders when Avatar is placed inside a focusable ancestor (e.g. a <button>).\n    'ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)]',\n    'ds:focus-visible:outline-ring',\n    'ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        // text-[var(--font-size-xs)] = 0.75rem (12px) — smallest available token\n        xs: 'ds:size-6 ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none',\n        sm: 'ds:size-8 ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none',\n        md: 'ds:size-10 ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none',\n        lg: 'ds:size-12 ds:text-[length:var(--font-size-sm)] ds:font-semibold ds:leading-none',\n        xl: 'ds:size-16 ds:text-[length:var(--font-size-base)] ds:font-semibold ds:leading-none',\n        // 2xl / 3xl are hero / display crops (operator cards, practice-\n        // profile pages). They token-reference `--avatar-size-*` so\n        // consumer themes can override the dimensions per-context, and\n        // `--avatar-text-size-*` so initials scale proportionally to\n        // the circle (otherwise --font-size-base at 192px reads as a\n        // tiny letter in a vast disc).\n        // Their initials size is a compound variant below: it depends on\n        // the ratio, and two text-size classes on one element would leave\n        // the winner to stylesheet order.\n        '2xl':\n          'ds:size-[var(--avatar-size-2xl)] ds:font-semibold ds:leading-none',\n        '3xl':\n          'ds:size-[var(--avatar-size-3xl)] ds:font-semibold ds:leading-none',\n      },\n      // HTP-6712. `rounded` is the photo shape for practices and\n      // professionals: a rounded rectangle whose corner scales with the\n      // size (compound variants below), so a 40px photo does not read as\n      // a circle and a 192px one matches the card corners.\n      shape: {\n        circle: 'ds:rounded-[var(--radius-full)]',\n        rounded: '',\n      },\n      // The size sets the height; a non-square ratio derives the width\n      // from it. A 192px practice photo becomes 256 x 192, a 128px\n      // professional one 96 x 128, so a hero keeps its height. Pair a\n      // non-square ratio with `shape=\"rounded\"`: a circle stretched to 4:3\n      // is a pill.\n      ratio: {\n        '1:1': '',\n        '4:3': 'ds:w-auto ds:aspect-[4/3]',\n        '3:4': 'ds:w-auto ds:aspect-[3/4]',\n      },\n    },\n    compoundVariants: [\n      {\n        shape: 'rounded',\n        size: ['xs', 'sm'],\n        className: 'ds:rounded-[var(--radius-sm)]',\n      },\n      {\n        shape: 'rounded',\n        size: ['md', 'lg', 'xl'],\n        className: 'ds:rounded-[var(--radius-md)]',\n      },\n      {\n        // The card radius, as on the white boxes the big photos sit in.\n        shape: 'rounded',\n        size: ['2xl', '3xl'],\n        className: 'ds:rounded-[var(--radius-lg)]',\n      },\n      // Display initials. A 3:4 box is a quarter narrower than its\n      // height, so they scale down with it: two wide or CJK initials\n      // still fit.\n      {\n        size: '2xl',\n        ratio: ['1:1', '4:3'],\n        className: 'ds:text-[length:var(--avatar-text-size-2xl)]',\n      },\n      {\n        size: '3xl',\n        ratio: ['1:1', '4:3'],\n        className: 'ds:text-[length:var(--avatar-text-size-3xl)]',\n      },\n      {\n        size: '2xl',\n        ratio: '3:4',\n        className: 'ds:text-[length:calc(var(--avatar-text-size-2xl)*0.75)]',\n      },\n      {\n        size: '3xl',\n        ratio: '3:4',\n        className: 'ds:text-[length:calc(var(--avatar-text-size-3xl)*0.75)]',\n      },\n    ],\n    defaultVariants: { size: 'md', shape: 'circle', ratio: '1:1' },\n  },\n);\n\n// The photo always fills and crops (object-fit: cover). A portrait (3:4)\n// crops towards the top so a face is not cut; a 216 x 360 photo in a 3:4\n// box loses 14px at the top and 58px at the bottom. Everything else crops\n// from the centre: square logos lose their top and bottom in 4:3.\nconst imageVariants = cva(\n  'ds:absolute ds:inset-0 ds:size-full ds:object-cover',\n  {\n    variants: {\n      ratio: {\n        '1:1': '',\n        '4:3': '',\n        '3:4': 'ds:object-[50%_20%]',\n      },\n    },\n    defaultVariants: { ratio: '1:1' },\n  },\n);\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\nexport interface AvatarProps\n  extends\n    Omit<HTMLAttributes<HTMLSpanElement>, 'color'>,\n    VariantProps<typeof avatarVariants> {\n  /** Image source URL. When provided and loads successfully, the image is displayed. */\n  src?: string;\n  /** Display name — drives initials extraction and deterministic background colour. */\n  name?: string;\n  /**\n   * Override the auto-generated background with any CSS colour string\n   * (e.g. `\"var(--color-violet-700)\"`).\n   * Applied via a CSS custom property so no `style` attribute is added to the JSX element.\n   * Caller is responsible for WCAG AA contrast (≥4.5:1) against white text.\n   */\n  color?: string;\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  ({ src, name, color, size, shape, ratio, className, ...props }, ref) => {\n    const { t } = useTranslation('ui');\n\n    const innerRef = useRef<HTMLSpanElement>(null);\n    const composedRef = composeRefs(ref, innerRef);\n\n    // Track only image errors. The image renders immediately as an overlay;\n    // before it loads the browser paints nothing (transparent), showing the\n    // background colour + initials behind it. On error we remove the img and\n    // the initials/fallback remain permanently visible.\n    const [imgError, setImgError] = useState(false);\n\n    // Reset error flag whenever src changes\n    useEffect(() => {\n      setImgError(false);\n    }, [src]);\n\n    // Apply color override via CSS custom property — avoids style={{…}} on JSX.\n    // Mirrors the pattern used by the Progress component for imperative CSS property injection.\n    useIsomorphicLayoutEffect(() => {\n      const el = innerRef.current;\n      if (!el) return;\n      if (color) {\n        el.style.setProperty('--avatar-color-override', color);\n      } else {\n        el.style.removeProperty('--avatar-color-override');\n      }\n    }, [color]);\n\n    // Image is \"active\" when provided and not errored\n    const imgActive = !!src && !imgError;\n\n    // Initials and fallback icon are shown when no usable image\n    const showInitials = !imgActive && !!name;\n    const showIcon = !imgActive && !name;\n\n    // Background — always rendered (serves as loading placeholder when image is fetching)\n    const fallbackBgClass = color\n      ? 'ds:bg-[var(--avatar-color-override)]'\n      : name\n        ? nameToColorClass(name)\n        : 'ds:bg-muted';\n\n    // Always light text against brand hues / color override; muted-foreground\n    // for icon. Both dark themes pin `--primary-foreground` to navy, which is\n    // illegible on the swatches, so `--avatar-initials-foreground` re-points\n    // to near-white `--color-grey-50` there.\n    const contentColorClass =\n      color || name\n        ? 'ds:text-[var(--avatar-initials-foreground,var(--primary-foreground))]'\n        : 'ds:text-muted-foreground';\n\n    const rootClassName = avatarVariants({\n      size,\n      shape,\n      ratio,\n      className: [fallbackBgClass, contentColorClass, className]\n        .filter(Boolean)\n        .join(' '),\n    });\n\n    // Accessible label — name takes priority, then the localised placeholder\n    const ariaLabel = name ?? t('avatar.placeholder', 'User avatar');\n\n    return (\n      <span\n        ref={composedRef}\n        role=\"img\"\n        aria-label={ariaLabel}\n        data-component=\"avatar\"\n        className={rootClassName}\n        {...props}\n      >\n        {/* Initials — rendered behind the image; visible while image is loading\n            or permanently when no src / src errors */}\n        {(showInitials || imgActive) && !!name && (\n          <span aria-hidden=\"true\">{getInitials(name)}</span>\n        )}\n\n        {/* Fallback icon — shown when neither image nor name is available */}\n        {showIcon && (\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            className=\"ds:size-[58%] ds:fill-current\"\n          >\n            <path d=\"M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v2h20v-2c0-3.33-6.67-5-10-5z\" />\n          </svg>\n        )}\n\n        {/* Image — absolutely positioned overlay. Renders transparently until the\n            browser paints the decoded pixels, then covers the initials behind it.\n            Removed from DOM on error so initials remain permanently visible. */}\n        {imgActive && (\n          <img\n            src={src}\n            alt=\"\"\n            aria-hidden=\"true\"\n            className={imageVariants({ ratio })}\n            onError={() => setImgError(true)}\n          />\n        )}\n      </span>\n    );\n  },\n);\n\nAvatar.displayName = 'Avatar';\n"],"names":["djb2","str","hash","i","INITIALS_BG_CLASSES","nameToColorClass","name","getInitials","toWords","text","word","outside","words","avatarVariants","cva","imageVariants","Avatar","forwardRef","src","color","size","shape","ratio","className","props","ref","t","useTranslation","innerRef","useRef","composedRef","composeRefs","imgError","setImgError","useState","useEffect","useIsomorphicLayoutEffect","el","imgActive","showInitials","showIcon","fallbackBgClass","rootClassName","ariaLabel","jsxs","jsx"],"mappings":"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"}