@luxfi/ui 6.1.2 → 7.0.0

package/dist/avatar.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type AvatarVariant = 'solid' | 'subtle' | 'outline';
+interface AvatarProps extends React.ComponentPropsWithoutRef<'span'> {
+    name?: string;
+    src?: string;
+    srcSet?: string;
+    loading?: ImageProps['loading'];
+    icon?: React.ReactElement;
+    fallback?: React.ReactNode;
+    size?: AvatarSize;
+    variant?: AvatarVariant;
+    borderless?: boolean;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends React.ComponentPropsWithoutRef<'div'> {
+    size?: AvatarSize;
+    variant?: AvatarVariant;
+    borderless?: boolean;
+}
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Avatar, AvatarGroup, type AvatarProps };

package/dist/avatar.js

@@ -0,0 +1,125 @@
+"use client";
+import * as RadixAvatar from '@radix-ui/react-avatar';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var SIZE_CLASSES = {
+  xs: "h-6 w-6 text-[10px]",
+  sm: "h-8 w-8 text-xs",
+  md: "h-10 w-10 text-sm",
+  lg: "h-12 w-12 text-base",
+  xl: "h-16 w-16 text-lg",
+  "2xl": "h-20 w-20 text-xl"
+};
+var VARIANT_CLASSES = {
+  solid: "bg-gray-500 text-white",
+  subtle: "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200",
+  outline: "border-2 border-gray-300 bg-transparent text-gray-700 dark:border-gray-600 dark:text-gray-200"
+};
+var DEFAULT_SIZE = "md";
+var DEFAULT_VARIANT = "subtle";
+var AvatarGroupContext = React.createContext({});
+function useAvatarGroupContext() {
+  return React.useContext(AvatarGroupContext);
+}
+var Avatar = React.forwardRef(
+  function Avatar2(props, ref) {
+    const group = useAvatarGroupContext();
+    const {
+      name,
+      src,
+      srcSet,
+      loading,
+      icon,
+      fallback,
+      children,
+      className,
+      size: sizeProp,
+      variant: variantProp,
+      borderless,
+      ...rest
+    } = props;
+    const size = sizeProp ?? group.size ?? DEFAULT_SIZE;
+    const variant = variantProp ?? group.variant ?? DEFAULT_VARIANT;
+    const isBorderless = borderless ?? group.borderless ?? false;
+    return /* @__PURE__ */ jsxs(
+      RadixAvatar.Root,
+      {
+        ref,
+        className: cn(
+          "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle",
+          SIZE_CLASSES[size],
+          VARIANT_CLASSES[variant],
+          !isBorderless && "ring-2 ring-white dark:ring-gray-900",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(AvatarFallback, { name, icon, children: fallback }),
+          /* @__PURE__ */ jsx(
+            RadixAvatar.Image,
+            {
+              className: "h-full w-full rounded-[inherit] object-cover",
+              src,
+              srcSet,
+              loading,
+              alt: name ?? ""
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+var AvatarFallback = React.forwardRef(
+  function AvatarFallback2(props, ref) {
+    const { name, icon, children, className, ...rest } = props;
+    return /* @__PURE__ */ jsxs(
+      RadixAvatar.Fallback,
+      {
+        ref,
+        className: cn(
+          "flex h-full w-full items-center justify-center font-medium",
+          className
+        ),
+        ...rest,
+        children: [
+          children,
+          name != null && children == null && /* @__PURE__ */ jsx(Fragment, { children: getInitials(name) }),
+          name == null && children == null && icon
+        ]
+      }
+    );
+  }
+);
+function getInitials(name) {
+  const names = name.trim().split(" ");
+  const firstName = names[0] != null ? names[0] : "";
+  const lastName = names.length > 1 ? names[names.length - 1] : "";
+  return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
+}
+var AvatarGroup = React.forwardRef(
+  function AvatarGroup2(props, ref) {
+    const { size, variant, borderless, className, ...rest } = props;
+    const contextValue = React.useMemo(
+      () => ({ size, variant, borderless }),
+      [size, variant, borderless]
+    );
+    return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex -space-x-3", className),
+        ...rest
+      }
+    ) });
+  }
+);
+
+export { Avatar, AvatarGroup };