@trail-ui/react
Version:
189 lines (185 loc) • 7.59 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/avatar/avatar.tsx
var avatar_exports = {};
__export(avatar_exports, {
Avatar: () => _Avatar,
AvatarContext: () => AvatarContext
});
module.exports = __toCommonJS(avatar_exports);
var import_hooks = require("@trail-ui/hooks");
var import_shared_utils = require("@trail-ui/shared-utils");
var import_theme = require("@trail-ui/theme");
var import_utils = require("@react-aria/utils");
var import_react = require("react");
var import_react_aria = require("react-aria");
var import_react_aria_components = require("react-aria-components");
// src/avatar/avatar-icon.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var AvatarIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"svg",
{
"aria-hidden": "true",
fill: "none",
height: "80%",
role: "presentation",
viewBox: "0 0 24 24",
width: "80%",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
d: "M12 2C9.38 2 7.25 4.13 7.25 6.75C7.25 9.32 9.26 11.4 11.88 11.49C11.96 11.48 12.04 11.48 12.1 11.49C12.12 11.49 12.13 11.49 12.15 11.49C12.16 11.49 12.16 11.49 12.17 11.49C14.73 11.4 16.74 9.32 16.75 6.75C16.75 4.13 14.62 2 12 2Z",
fill: "currentColor"
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
d: "M17.0809 14.1489C14.2909 12.2889 9.74094 12.2889 6.93094 14.1489C5.66094 14.9989 4.96094 16.1489 4.96094 17.3789C4.96094 18.6089 5.66094 19.7489 6.92094 20.5889C8.32094 21.5289 10.1609 21.9989 12.0009 21.9989C13.8409 21.9989 15.6809 21.5289 17.0809 20.5889C18.3409 19.7389 19.0409 18.5989 19.0409 17.3589C19.0309 16.1289 18.3409 14.9889 17.0809 14.1489Z",
fill: "currentColor"
}
)
]
}
);
// src/avatar/avatar.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var safeText = (name) => {
const parts = name.trim().split(" ");
if (parts.length === 1) {
return parts[0].slice(0, 2).toUpperCase();
} else {
return (parts[0][0] + parts[1][0]).toUpperCase();
}
};
var AvatarContext = (0, import_react.createContext)({});
function Avatar(props, ref) {
[props, ref] = (0, import_react_aria_components.useContextProps)(props, ref, AvatarContext);
const ctx = props;
const {
elementType,
src,
name,
icon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AvatarIcon, {}),
className,
classNames,
fallback: fallbackComponent,
alt = name || "avatar",
color = "red",
radius = "full",
size = "md",
isBordered = false,
isDisabled = false,
ignoreFallback = false,
showFallback: showFallbackProp = false,
getInitials = safeText,
ImgComponent = "img",
imgProps,
onError,
onClick,
...avatarProps
} = props;
const Component = elementType || "span";
const { isFocusVisible, isFocused, focusProps } = (0, import_react_aria.useFocusRing)();
const { isHovered, hoverProps } = (0, import_react_aria.useHover)({ isDisabled });
const imageStatus = (0, import_hooks.useImage)({ src, onError, ignoreFallback });
const isImgLoaded = imageStatus === "loaded";
const showFallback = (!src || !isImgLoaded) && showFallbackProp;
const slots = (0, import_react.useMemo)(
() => {
var _a;
return (0, import_theme.avatar)({
color,
radius,
size,
isBordered,
isDisabled,
isInGroup: ctx == null ? void 0 : ctx.isInGroup,
isInGridGroup: (_a = ctx == null ? void 0 : ctx.isGrid) != null ? _a : false
});
},
[color, radius, size, isBordered, isDisabled, ctx == null ? void 0 : ctx.isInGroup, ctx == null ? void 0 : ctx.isGrid]
);
const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
const fallback = (0, import_react.useMemo)(() => {
if (!showFallback && src)
return null;
if (fallbackComponent) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
"aria-label": alt,
className: slots.fallback({ class: classNames == null ? void 0 : classNames.fallback }),
role: "img",
children: fallbackComponent
}
);
}
return name ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-label": alt, className: slots.name({ class: classNames == null ? void 0 : classNames.name }), role: "img", children: getInitials(name) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-label": alt, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }), role: "img", children: icon });
}, [showFallback, src, fallbackComponent, classNames, name, icon, alt, slots, getInitials]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_aria_components.TooltipTrigger, { delay: 200, closeDelay: 200, children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_aria_components.Button,
{
isDisabled,
className: `${isDisabled ? "pointer-events-none cursor-default" : ""} focus-visible:rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-purple-600`,
onPress: onClick,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
Component,
{
...(0, import_react_aria.mergeProps)((0, import_utils.filterDOMProps)(avatarProps), focusProps, hoverProps),
ref,
"data-hovered": (0, import_shared_utils.dataAttr)(isHovered),
"data-focused": (0, import_shared_utils.dataAttr)(isFocused),
"data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
className: slots.base({ class: baseStyles }),
children: [
src && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
ImgComponent,
{
src,
alt,
"data-loaded": (0, import_shared_utils.dataAttr)(isImgLoaded),
className: slots.img({ class: classNames == null ? void 0 : classNames.img }),
...imgProps
}
),
fallback
]
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_aria_components.Tooltip,
{
className: "shadow-medium pointer-events-none mt-1 rounded bg-neutral-900 text-neutral-50 dark:bg-neutral-900 dark:text-neutral-50",
placement: "bottom",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "px-2 py-1 text-[10px]", children: alt })
}
)
] });
}
var _Avatar = (0, import_react.forwardRef)(Avatar);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Avatar,
AvatarContext
});