@kopexa/avatar 1.0.0 → 1.0.2

package/dist/avatar-group.context.d.mts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { ContextType } from './use-avatar-group.mjs';
+import '@kopexa/react-utils';
+import '@kopexa/theme';
+import './avatar.mjs';
+import 'react/jsx-runtime';
+import './use-avatar.mjs';
+import 'tailwind-variants';
+
+declare const AvatarGroupProvider: react.Provider<ContextType>;
+declare const useAvatarGroupContext: () => ContextType;
+
+export { AvatarGroupProvider, useAvatarGroupContext };

package/dist/avatar-group.context.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { ContextType } from './use-avatar-group.js';
+import '@kopexa/react-utils';
+import '@kopexa/theme';
+import './avatar.js';
+import 'react/jsx-runtime';
+import './use-avatar.js';
+import 'tailwind-variants';
+
+declare const AvatarGroupProvider: react.Provider<ContextType>;
+declare const useAvatarGroupContext: () => ContextType;
+
+export { AvatarGroupProvider, useAvatarGroupContext };

package/dist/avatar-group.context.js

@@ -0,0 +1,37 @@
+"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/avatar-group.context.ts
+var avatar_group_context_exports = {};
+__export(avatar_group_context_exports, {
+  AvatarGroupProvider: () => AvatarGroupProvider,
+  useAvatarGroupContext: () => useAvatarGroupContext
+});
+module.exports = __toCommonJS(avatar_group_context_exports);
+var import_react_utils = require("@kopexa/react-utils");
+var [AvatarGroupProvider, useAvatarGroupContext] = (0, import_react_utils.createContext)({
+  name: "AvatarGroupContext",
+  strict: false
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AvatarGroupProvider,
+  useAvatarGroupContext
+});

package/dist/avatar-group.context.mjs

@@ -0,0 +1,9 @@
+"use client";
+import {
+  AvatarGroupProvider,
+  useAvatarGroupContext
+} from "./chunk-FBUAHX2S.mjs";
+export {
+  AvatarGroupProvider,
+  useAvatarGroupContext
+};

package/dist/avatar-group.d.mts

@@ -0,0 +1,14 @@
+import './avatar.mjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UseAvatarGroupProps } from './use-avatar-group.mjs';
+import './use-avatar.mjs';
+import 'tailwind-variants';
+import '@kopexa/react-utils';
+import '@kopexa/theme';
+import 'react';
+
+interface AvatarGroupProps extends UseAvatarGroupProps {
+}
+declare function AvatarGroup(props: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+
+export { AvatarGroup, type AvatarGroupProps };

package/dist/avatar-group.d.ts

@@ -0,0 +1,14 @@
+import './avatar.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UseAvatarGroupProps } from './use-avatar-group.js';
+import './use-avatar.js';
+import 'tailwind-variants';
+import '@kopexa/react-utils';
+import '@kopexa/theme';
+import 'react';
+
+interface AvatarGroupProps extends UseAvatarGroupProps {
+}
+declare function AvatarGroup(props: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+
+export { AvatarGroup, type AvatarGroupProps };

package/dist/avatar-group.js

@@ -0,0 +1,306 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/avatar-group.tsx
+var avatar_group_exports = {};
+__export(avatar_group_exports, {
+  AvatarGroup: () => AvatarGroup
+});
+module.exports = __toCommonJS(avatar_group_exports);
+
+// src/avatar.tsx
+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 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
+  };
+}
+
+// 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",
+  {
+    "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/use-avatar-group.ts
+var import_react_utils2 = require("@kopexa/react-utils");
+var import_shared_utils3 = require("@kopexa/shared-utils");
+var import_theme2 = require("@kopexa/theme");
+var import_react2 = require("react");
+function useAvatarGroup(props = {}) {
+  const {
+    ref,
+    max = 5,
+    total,
+    size,
+    color,
+    radius,
+    children,
+    isBordered,
+    isDisabled,
+    isGrid,
+    className,
+    classNames,
+    ...otherProps
+  } = props;
+  const context = (0, import_react2.useMemo)(
+    () => ({
+      size,
+      color,
+      radius,
+      isGrid,
+      isBordered,
+      isDisabled
+    }),
+    [size, color, radius, isGrid, isBordered, isDisabled]
+  );
+  const slots = (0, import_react2.useMemo)(
+    () => (0, import_theme2.avatarGroup)({ className, isGrid }),
+    [className, isGrid]
+  );
+  const validChildren = (0, import_react_utils2.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: (0, import_shared_utils3.cn)(
+        isFirstAvatar ? "ms-0" : !isGrid ? "-ms-2" : "",
+        isLastAvatar && remainingCount < 1 ? "hover:-translate-x-0" : ""
+      )
+    };
+    return (0, import_react2.cloneElement)(child, (0, import_shared_utils3.compact)(childProps));
+  });
+  const getAvatarGroupProps = () => {
+    return {
+      ref,
+      className: slots.base({
+        class: (0, import_shared_utils3.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
+  };
+}
+
+// src/avatar-group.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AvatarGroup(props) {
+  const {
+    clones,
+    context,
+    remainingCount,
+    getAvatarGroupCountProps,
+    getAvatarGroupProps
+  } = useAvatarGroup(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ...getAvatarGroupProps(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(AvatarGroupProvider, { value: context, children: [
+    clones,
+    remainingCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Avatar, { ...getAvatarGroupCountProps(), name: `+${remainingCount}` })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AvatarGroup
+});

package/dist/avatar-group.mjs

@@ -0,0 +1,11 @@
+"use client";
+import {
+  AvatarGroup
+} from "./chunk-HBUPEI6X.mjs";
+import "./chunk-KPWT5YIU.mjs";
+import "./chunk-J37VYVJO.mjs";
+import "./chunk-CI55TF4E.mjs";
+import "./chunk-FBUAHX2S.mjs";
+export {
+  AvatarGroup
+};

package/dist/avatar.d.mts

@@ -1,22 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SlotsToClasses, AvatarSlots, AvatarVariantProps } from '@kopexa/theme';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { ComponentProps, RefObject } from 'react';
+import { UseAvatarProps } from './use-avatar.mjs';
+import 'tailwind-variants';
+import '@kopexa/react-utils';
+import '@kopexa/theme';
+import 'react';
 
-type BaseProps = {
-    classNames?: SlotsToClasses<AvatarSlots>;
-    /**
-     * 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;
-    src?: string | undefined;
-    onLoadingStatusChange?: (status: "idle" | "loading" | "loaded" | "error") => void;
-    imgRef?: RefObject<HTMLImageElement | null>;
-    alt?: string;
-};
-type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & BaseProps & AvatarVariantProps;
+interface AvatarProps extends UseAvatarProps {
+}
 declare const Avatar: (props: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 export { Avatar, type AvatarProps };

package/dist/avatar.d.ts

@@ -1,22 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SlotsToClasses, AvatarSlots, AvatarVariantProps } from '@kopexa/theme';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { ComponentProps, RefObject } from 'react';
+import { UseAvatarProps } from './use-avatar.js';
+import 'tailwind-variants';
+import '@kopexa/react-utils';
+import '@kopexa/theme';
+import 'react';
 
-type BaseProps = {
-    classNames?: SlotsToClasses<AvatarSlots>;
-    /**
-     * 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;
-    src?: string | undefined;
-    onLoadingStatusChange?: (status: "idle" | "loading" | "loaded" | "error") => void;
-    imgRef?: RefObject<HTMLImageElement | null>;
-    alt?: string;
-};
-type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & BaseProps & AvatarVariantProps;
+interface AvatarProps extends UseAvatarProps {
+}
 declare const Avatar: (props: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 export { Avatar, type AvatarProps };