@aegov/design-system-react/dist/components/Avatar/Avatar.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactAvatar = require("@radix-ui/react-avatar");
var _react2 = require("@phosphor-icons/react");
var _zod = require("zod");
var _utils = require("../../utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const sizeSchema = _zod.z.enum(['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl']);
const variantSchema = _zod.z.enum(['square', 'rounded']);
const statusSchema = _zod.z.enum(['online', 'offline', 'none']);
const sizeStyles = {
  xs: 'h-6 w-6',
  sm: 'h-8 w-8',
  base: 'h-10 w-10',
  lg: 'h-12 w-12',
  xl: 'h-14 w-14',
  '2xl': 'h-16 w-16',
  '3xl': 'h-20 w-20'
};
const statusStyles = {
  online: 'bg-green-500',
  offline: 'bg-red-500',
  none: 'hidden'
};
const borderRadiusStyles = {
  xs: 'rounded-[4px]',
  sm: 'rounded-[4px]',
  base: 'rounded-[6px]',
  lg: 'rounded-[6px]',
  xl: 'rounded-[8px]',
  '2xl': 'rounded-[8px]',
  '3xl': 'rounded-[8px]'
};
const Avatar = ({
  src,
  alt,
  size = 'base',
  variant = 'square',
  status = 'none',
  className,
  ...props
}) => {
  // Validate props
  sizeSchema.parse(size);
  variantSchema.parse(variant);
  statusSchema.parse(status);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "relative inline-block"
  }, /*#__PURE__*/_react.default.createElement(_reactAvatar.Root, _extends({
    className: (0, _utils.cn)('relative inline-flex items-center justify-center overflow-hidden', sizeStyles[size], variant === 'rounded' ? 'rounded-full' : borderRadiusStyles[size], className)
  }, props), /*#__PURE__*/_react.default.createElement(_reactAvatar.Image, {
    src: src,
    alt: alt,
    className: "h-full w-full object-cover"
  }), /*#__PURE__*/_react.default.createElement(_reactAvatar.Fallback, {
    className: "flex h-full w-full items-center justify-center bg-gray-100",
    delayMs: 600
  }, /*#__PURE__*/_react.default.createElement(_react2.User, {
    className: "h-1/2 w-1/2 text-gray-400",
    weight: "light"
  }))), status !== 'none' && /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _utils.cn)('absolute -right-0.5 -top-0.5 block rounded-full ring-2 ring-white', statusStyles[status], size === 'xs' ? 'h-1.5 w-1.5' : '', size === 'sm' ? 'h-2 w-2' : '', size === 'base' ? 'h-2.5 w-2.5' : '', size === 'lg' ? 'h-3 w-3' : '', size === 'xl' ? 'h-3.5 w-3.5' : '', size === '2xl' ? 'h-4 w-4' : '', size === '3xl' ? 'h-5 w-5' : '')
  }));
};
var _default = exports.default = Avatar;