@kopexa/avatar 1.0.1 → 1.0.2

package/dist/avatar.js

@@ -34,78 +34,150 @@ __export(avatar_exports, {
   Avatar: () => Avatar
 });
 module.exports = __toCommonJS(avatar_exports);
+var import_shared_utils2 = require("@kopexa/shared-utils");
+var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
+
+// src/use-avatar.ts
 var import_shared_utils = require("@kopexa/shared-utils");
 var import_theme = require("@kopexa/theme");
-var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Avatar = (props) => {
+
+// src/avatar-group.context.ts
+var import_react_utils = require("@kopexa/react-utils");
+var [AvatarGroupProvider, useAvatarGroupContext] = (0, import_react_utils.createContext)({
+  name: "AvatarGroupContext",
+  strict: false
+});
+
+// src/use-avatar.ts
+function useAvatar(originalProps = {}) {
+  var _a, _b, _c, _d, _e;
+  const groupContext = useAvatarGroupContext();
+  const isInGroup = !!groupContext;
   const {
-    className,
-    size,
-    radius,
-    name,
-    color,
+    ref,
     src,
-    onLoadingStatusChange,
-    isBordered,
-    isDisabled,
-    imgRef,
+    name,
     classNames,
-    alt,
-    ...rest
-  } = props;
-  const [status, setStatus] = (0, import_react.useState)(
-    "idle"
+    alt = name || "avatar",
+    imgRef: imgRefProp,
+    color = (_a = groupContext == null ? void 0 : groupContext.color) != null ? _a : "default",
+    radius = (_b = groupContext == null ? void 0 : groupContext.radius) != null ? _b : "full",
+    size = (_c = groupContext == null ? void 0 : groupContext.size) != null ? _c : "md",
+    isBordered = (_d = groupContext == null ? void 0 : groupContext.isBordered) != null ? _d : false,
+    isDisabled = (_e = groupContext == null ? void 0 : groupContext.isDisabled) != null ? _e : false,
+    className,
+    onError,
+    onLoadingStatusChange,
+    ...otherProps
+  } = originalProps;
+  const [status, setStatus] = (0, import_react.useState)("idle");
+  const handleLoadingStatusChange = (0, import_react.useCallback)(
+    (status2) => {
+      onLoadingStatusChange == null ? void 0 : onLoadingStatusChange(status2);
+      setStatus(status2);
+    },
+    [onLoadingStatusChange]
   );
-  const styles = (0, import_theme.avatar)({ size, radius, color, isBordered, isDisabled });
-  const handleLoadingStatusChange = (status2) => {
-    onLoadingStatusChange == null ? void 0 : onLoadingStatusChange(status2);
-    setStatus(status2);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    AvatarPrimitive.Root,
-    {
+  const slots = (0, import_react.useMemo)(
+    () => {
+      var _a2;
+      return (0, import_theme.avatar)({
+        color,
+        radius,
+        size,
+        isBordered,
+        isDisabled,
+        isInGroup,
+        isInGridGroup: (_a2 = groupContext == null ? void 0 : groupContext.isGrid) != null ? _a2 : false
+      });
+    },
+    [
+      color,
+      radius,
+      size,
+      isBordered,
+      isDisabled,
+      isInGroup,
+      groupContext == null ? void 0 : groupContext.isGrid
+    ]
+  );
+  const baseStyles = (0, import_shared_utils.cn)(classNames == null ? void 0 : classNames.root, className);
+  const getAvatarProps = (0, import_react.useCallback)(
+    (props = {}) => ({
+      ref,
       "data-slot": "avatar",
-      className: styles.root({ className }),
-      ...rest,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          AvatarPrimitive.Image,
-          {
-            "data-slot": "avatar-image",
-            src,
-            "data-status": status,
-            className: styles.img(),
-            onLoadingStatusChange: handleLoadingStatusChange,
-            ref: imgRef,
-            alt
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", children: name ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            className: styles.name({
-              className: classNames == null ? void 0 : classNames.name
-            }),
-            role: "img",
-            "aria-label": alt,
-            children: (0, import_shared_utils.getInitials)(name)
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            className: styles.icon({
-              className: classNames == null ? void 0 : classNames.icon
-            }),
-            role: "img",
-            "aria-label": alt,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarIcon, {})
-          }
-        ) })
-      ]
-    }
+      className: slots.root({
+        class: (0, import_shared_utils.cn)(baseStyles, props == null ? void 0 : props.className)
+      }),
+      ...otherProps
+    }),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: we want to memoize this
+    [slots, baseStyles, otherProps, ref]
   );
+  const getImageProps = (0, import_react.useCallback)(
+    () => ({
+      "data-slot": "avatar-image",
+      "data-status": status,
+      src,
+      onLoadingStatusChange: handleLoadingStatusChange,
+      ref: imgRefProp,
+      alt,
+      onError,
+      className: slots.img({
+        class: classNames == null ? void 0 : classNames.img
+      })
+    }),
+    [
+      status,
+      src,
+      handleLoadingStatusChange,
+      imgRefProp,
+      alt,
+      slots.img,
+      classNames == null ? void 0 : classNames.img,
+      onError
+    ]
+  );
+  return {
+    src,
+    alt,
+    slots,
+    classNames,
+    name,
+    getAvatarProps,
+    getImageProps
+  };
+}
+
+// src/avatar.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Avatar = (props) => {
+  const { alt, getAvatarProps, getImageProps, slots, classNames, name } = useAvatar(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarPrimitive.Root, { ...getAvatarProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarPrimitive.Image, { ...getImageProps() }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", children: name ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: slots.name({
+          className: classNames == null ? void 0 : classNames.name
+        }),
+        role: "img",
+        "aria-label": alt,
+        children: (0, import_shared_utils2.getInitials)(name)
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: slots.icon({
+          className: classNames == null ? void 0 : classNames.icon
+        }),
+        role: "img",
+        "aria-label": alt,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarIcon, {})
+      }
+    ) })
+  ] });
 };
 var AvatarIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
   "svg",

package/dist/avatar.mjs

@@ -1,7 +1,9 @@
 "use client";
 import {
   Avatar
-} from "./chunk-EVKHBB7E.mjs";
+} from "./chunk-KPWT5YIU.mjs";
+import "./chunk-CI55TF4E.mjs";
+import "./chunk-FBUAHX2S.mjs";
 export {
   Avatar
 };

package/dist/chunk-CI55TF4E.mjs

@@ -0,0 +1,118 @@
+"use client";
+import {
+  useAvatarGroupContext
+} from "./chunk-FBUAHX2S.mjs";
+
+// src/use-avatar.ts
+import { cn } from "@kopexa/shared-utils";
+import {
+  avatar
+} from "@kopexa/theme";
+import {
+  useCallback,
+  useMemo,
+  useState
+} from "react";
+function useAvatar(originalProps = {}) {
+  var _a, _b, _c, _d, _e;
+  const groupContext = useAvatarGroupContext();
+  const isInGroup = !!groupContext;
+  const {
+    ref,
+    src,
+    name,
+    classNames,
+    alt = name || "avatar",
+    imgRef: imgRefProp,
+    color = (_a = groupContext == null ? void 0 : groupContext.color) != null ? _a : "default",
+    radius = (_b = groupContext == null ? void 0 : groupContext.radius) != null ? _b : "full",
+    size = (_c = groupContext == null ? void 0 : groupContext.size) != null ? _c : "md",
+    isBordered = (_d = groupContext == null ? void 0 : groupContext.isBordered) != null ? _d : false,
+    isDisabled = (_e = groupContext == null ? void 0 : groupContext.isDisabled) != null ? _e : false,
+    className,
+    onError,
+    onLoadingStatusChange,
+    ...otherProps
+  } = originalProps;
+  const [status, setStatus] = useState("idle");
+  const handleLoadingStatusChange = useCallback(
+    (status2) => {
+      onLoadingStatusChange == null ? void 0 : onLoadingStatusChange(status2);
+      setStatus(status2);
+    },
+    [onLoadingStatusChange]
+  );
+  const slots = useMemo(
+    () => {
+      var _a2;
+      return avatar({
+        color,
+        radius,
+        size,
+        isBordered,
+        isDisabled,
+        isInGroup,
+        isInGridGroup: (_a2 = groupContext == null ? void 0 : groupContext.isGrid) != null ? _a2 : false
+      });
+    },
+    [
+      color,
+      radius,
+      size,
+      isBordered,
+      isDisabled,
+      isInGroup,
+      groupContext == null ? void 0 : groupContext.isGrid
+    ]
+  );
+  const baseStyles = cn(classNames == null ? void 0 : classNames.root, className);
+  const getAvatarProps = useCallback(
+    (props = {}) => ({
+      ref,
+      "data-slot": "avatar",
+      className: slots.root({
+        class: cn(baseStyles, props == null ? void 0 : props.className)
+      }),
+      ...otherProps
+    }),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: we want to memoize this
+    [slots, baseStyles, otherProps, ref]
+  );
+  const getImageProps = useCallback(
+    () => ({
+      "data-slot": "avatar-image",
+      "data-status": status,
+      src,
+      onLoadingStatusChange: handleLoadingStatusChange,
+      ref: imgRefProp,
+      alt,
+      onError,
+      className: slots.img({
+        class: classNames == null ? void 0 : classNames.img
+      })
+    }),
+    [
+      status,
+      src,
+      handleLoadingStatusChange,
+      imgRefProp,
+      alt,
+      slots.img,
+      classNames == null ? void 0 : classNames.img,
+      onError
+    ]
+  );
+  return {
+    src,
+    alt,
+    slots,
+    classNames,
+    name,
+    getAvatarProps,
+    getImageProps
+  };
+}
+
+export {
+  useAvatar
+};

package/dist/chunk-FBUAHX2S.mjs

@@ -0,0 +1,13 @@
+"use client";
+
+// src/avatar-group.context.ts
+import { createContext } from "@kopexa/react-utils";
+var [AvatarGroupProvider, useAvatarGroupContext] = createContext({
+  name: "AvatarGroupContext",
+  strict: false
+});
+
+export {
+  AvatarGroupProvider,
+  useAvatarGroupContext
+};

package/dist/chunk-HBUPEI6X.mjs

@@ -0,0 +1,30 @@
+"use client";
+import {
+  Avatar
+} from "./chunk-KPWT5YIU.mjs";
+import {
+  useAvatarGroup
+} from "./chunk-J37VYVJO.mjs";
+import {
+  AvatarGroupProvider
+} from "./chunk-FBUAHX2S.mjs";
+
+// src/avatar-group.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function AvatarGroup(props) {
+  const {
+    clones,
+    context,
+    remainingCount,
+    getAvatarGroupCountProps,
+    getAvatarGroupProps
+  } = useAvatarGroup(props);
+  return /* @__PURE__ */ jsx("div", { ...getAvatarGroupProps(), children: /* @__PURE__ */ jsxs(AvatarGroupProvider, { value: context, children: [
+    clones,
+    remainingCount > 0 && /* @__PURE__ */ jsx(Avatar, { ...getAvatarGroupCountProps(), name: `+${remainingCount}` })
+  ] }) });
+}
+
+export {
+  AvatarGroup
+};

package/dist/chunk-J37VYVJO.mjs

@@ -0,0 +1,83 @@
+"use client";
+
+// src/use-avatar-group.ts
+import { getValidChildren } from "@kopexa/react-utils";
+import { cn, compact } from "@kopexa/shared-utils";
+import {
+  avatarGroup
+} from "@kopexa/theme";
+import { cloneElement, useMemo } from "react";
+function useAvatarGroup(props = {}) {
+  const {
+    ref,
+    max = 5,
+    total,
+    size,
+    color,
+    radius,
+    children,
+    isBordered,
+    isDisabled,
+    isGrid,
+    className,
+    classNames,
+    ...otherProps
+  } = props;
+  const context = useMemo(
+    () => ({
+      size,
+      color,
+      radius,
+      isGrid,
+      isBordered,
+      isDisabled
+    }),
+    [size, color, radius, isGrid, isBordered, isDisabled]
+  );
+  const slots = useMemo(
+    () => avatarGroup({ className, isGrid }),
+    [className, isGrid]
+  );
+  const validChildren = getValidChildren(children);
+  const childrenWithinMax = max ? validChildren.slice(0, max) : validChildren;
+  const remainingCount = total ? total : max != null ? validChildren.length - max : -1;
+  const clones = childrenWithinMax.map((child, index) => {
+    const isFirstAvatar = index === 0;
+    const isLastAvatar = index === childrenWithinMax.length - 1;
+    const childProps = {
+      className: cn(
+        isFirstAvatar ? "ms-0" : !isGrid ? "-ms-2" : "",
+        isLastAvatar && remainingCount < 1 ? "hover:-translate-x-0" : ""
+      )
+    };
+    return cloneElement(child, compact(childProps));
+  });
+  const getAvatarGroupProps = () => {
+    return {
+      ref,
+      className: slots.base({
+        class: cn(classNames == null ? void 0 : classNames.base, className)
+      }),
+      role: "group",
+      ...otherProps
+    };
+  };
+  const getAvatarGroupCountProps = () => {
+    return {
+      className: slots.count({
+        class: classNames == null ? void 0 : classNames.count
+      })
+    };
+  };
+  return {
+    context,
+    remainingCount,
+    clones,
+    getAvatarGroupProps,
+    getAvatarGroupCountProps
+  };
+}
+
+export {
+  useAvatarGroup
+};

package/dist/chunk-KPWT5YIU.mjs

@@ -0,0 +1,67 @@
+"use client";
+import {
+  useAvatar
+} from "./chunk-CI55TF4E.mjs";
+
+// src/avatar.tsx
+import { getInitials } from "@kopexa/shared-utils";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Avatar = (props) => {
+  const { alt, getAvatarProps, getImageProps, slots, classNames, name } = useAvatar(props);
+  return /* @__PURE__ */ jsxs(AvatarPrimitive.Root, { ...getAvatarProps(), children: [
+    /* @__PURE__ */ jsx(AvatarPrimitive.Image, { ...getImageProps() }),
+    /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", children: name ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: slots.name({
+          className: classNames == null ? void 0 : classNames.name
+        }),
+        role: "img",
+        "aria-label": alt,
+        children: getInitials(name)
+      }
+    ) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: slots.icon({
+          className: classNames == null ? void 0 : classNames.icon
+        }),
+        role: "img",
+        "aria-label": alt,
+        children: /* @__PURE__ */ jsx(AvatarIcon, {})
+      }
+    ) })
+  ] });
+};
+var AvatarIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    height: "80%",
+    role: "presentation",
+    viewBox: "0 0 24 24",
+    width: "80%",
+    children: [
+      /* @__PURE__ */ 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__ */ 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"
+        }
+      )
+    ]
+  }
+);
+
+export {
+  Avatar
+};

package/dist/index.d.mts

@@ -1,5 +1,9 @@
 export { Avatar, AvatarProps } from './avatar.mjs';
+export { AvatarGroup, AvatarGroupProps } from './avatar-group.mjs';
 import 'react/jsx-runtime';
+import './use-avatar.mjs';
+import 'tailwind-variants';
+import '@kopexa/react-utils';
 import '@kopexa/theme';
-import '@radix-ui/react-avatar';
 import 'react';
+import './use-avatar-group.mjs';

package/dist/index.d.ts

@@ -1,5 +1,9 @@
 export { Avatar, AvatarProps } from './avatar.js';
+export { AvatarGroup, AvatarGroupProps } from './avatar-group.js';
 import 'react/jsx-runtime';
+import './use-avatar.js';
+import 'tailwind-variants';
+import '@kopexa/react-utils';
 import '@kopexa/theme';
-import '@radix-ui/react-avatar';
 import 'react';
+import './use-avatar-group.js';