@kopexa/avatar 1.0.1 → 1.0.2

package/dist/use-avatar.d.ts

@@ -0,0 +1,136 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { PropGetter } from '@kopexa/react-utils';
+import { SlotsToClasses, AvatarSlots, AvatarVariantProps } from '@kopexa/theme';
+import { ComponentProps, RefObject } from 'react';
+
+interface Props extends ComponentProps<"span"> {
+    /**
+     * Ref to the Image DOM node.
+     */
+    imgRef?: RefObject<HTMLImageElement | null>;
+    /**
+     * The name of the person in the avatar. -
+     * if **src** has loaded, the name will be used as the **alt** attribute of the **img**
+     * - If **src** is not loaded, the name will be used to create the initials
+     */
+    name?: string;
+    /**
+     * Image source.
+     */
+    src?: string;
+    /**
+     * Image alt text.
+     */
+    alt?: string;
+    classNames?: SlotsToClasses<AvatarSlots>;
+    onLoadingStatusChange?: (status: ImageStatus) => void;
+    /**
+     * Function called when image failed to load
+     */
+    onError?: () => void;
+}
+type UseAvatarProps = Props & Omit<AvatarVariantProps, "children" | "isInGroup" | "isInGridGroup">;
+type ImageStatus = "idle" | "loading" | "loaded" | "error";
+declare function useAvatar(originalProps?: UseAvatarProps): {
+    src: string | undefined;
+    alt: string;
+    slots: {
+        root: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        img: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        fallback: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        name: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        icon: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {
+        root: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        img: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        fallback: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        name: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        icon: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive" | undefined;
+            isBordered?: boolean | undefined;
+            isDisabled?: boolean | undefined;
+            isInGroup?: boolean | undefined;
+            isInGridGroup?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {};
+    classNames: SlotsToClasses<"name" | "img" | "root" | "fallback" | "icon"> | undefined;
+    name: string | undefined;
+    getAvatarProps: PropGetter;
+    getImageProps: PropGetter;
+};
+
+export { type ImageStatus, type UseAvatarProps, useAvatar };

package/dist/use-avatar.js

@@ -0,0 +1,141 @@
+"use client";
+"use strict";
+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/use-avatar.ts
+var use_avatar_exports = {};
+__export(use_avatar_exports, {
+  useAvatar: () => useAvatar
+});
+module.exports = __toCommonJS(use_avatar_exports);
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_react = require("react");
+
+// 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 {
+    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] = (0, import_react.useState)("idle");
+  const handleLoadingStatusChange = (0, import_react.useCallback)(
+    (status2) => {
+      onLoadingStatusChange == null ? void 0 : onLoadingStatusChange(status2);
+      setStatus(status2);
+    },
+    [onLoadingStatusChange]
+  );
+  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: 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
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAvatar
+});

package/dist/use-avatar.mjs

@@ -0,0 +1,8 @@
+"use client";
+import {
+  useAvatar
+} from "./chunk-CI55TF4E.mjs";
+import "./chunk-FBUAHX2S.mjs";
+export {
+  useAvatar
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/avatar",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"
@@ -28,12 +28,12 @@
     "motion": ">=12.23.6",
     "react": ">=19.0.0-rc.0",
     "react-dom": ">=19.0.0-rc.0",
-    "@kopexa/theme": "1.5.2"
+    "@kopexa/theme": "1.5.3"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.10",
-    "@kopexa/react-utils": "2.0.3",
-    "@kopexa/shared-utils": "1.1.3"
+    "@kopexa/react-utils": "2.0.4",
+    "@kopexa/shared-utils": "1.1.4"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",

package/dist/chunk-EVKHBB7E.mjs

@@ -1,109 +0,0 @@
-"use client";
-
-// src/avatar.tsx
-import { getInitials } from "@kopexa/shared-utils";
-import {
-  avatar
-} from "@kopexa/theme";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Avatar = (props) => {
-  const {
-    className,
-    size,
-    radius,
-    name,
-    color,
-    src,
-    onLoadingStatusChange,
-    isBordered,
-    isDisabled,
-    imgRef,
-    classNames,
-    alt,
-    ...rest
-  } = props;
-  const [status, setStatus] = useState(
-    "idle"
-  );
-  const styles = avatar({ size, radius, color, isBordered, isDisabled });
-  const handleLoadingStatusChange = (status2) => {
-    onLoadingStatusChange == null ? void 0 : onLoadingStatusChange(status2);
-    setStatus(status2);
-  };
-  return /* @__PURE__ */ jsxs(
-    AvatarPrimitive.Root,
-    {
-      "data-slot": "avatar",
-      className: styles.root({ className }),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx(
-          AvatarPrimitive.Image,
-          {
-            "data-slot": "avatar-image",
-            src,
-            "data-status": status,
-            className: styles.img(),
-            onLoadingStatusChange: handleLoadingStatusChange,
-            ref: imgRef,
-            alt
-          }
-        ),
-        /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", children: name ? /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: styles.name({
-              className: classNames == null ? void 0 : classNames.name
-            }),
-            role: "img",
-            "aria-label": alt,
-            children: getInitials(name)
-          }
-        ) : /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: styles.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
-};