@popgrids/ui 0.0.31 → 0.0.33

package/dist/index.cjs

@@ -1,8 +1,11 @@
 'use strict';
 
+var avatar = require('@base-ui/react/avatar');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var mergeProps = require('@base-ui/react/merge-props');
+var useRender = require('@base-ui/react/use-render');
 var jsxRuntime = require('react/jsx-runtime');
 var button = require('@base-ui/react/button');
 var checkbox = require('@base-ui/react/checkbox');
@@ -10,14 +13,163 @@ var icons = require('@untitledui/icons');
 var dialog = require('@base-ui/react/dialog');
 var menu = require('@base-ui/react/menu');
 var input = require('@base-ui/react/input');
-var mergeProps = require('@base-ui/react/merge-props');
-var useRender = require('@base-ui/react/use-render');
 var tooltip = require('@base-ui/react/tooltip');
 
-// src/components/banner-notification/banner-notification.tsx
+// src/components/avatar/avatar.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+var notificationBadgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-full box-border shrink-0 whitespace-nowrap text-xs font-medium leading-[18px] min-w-[18px] h-[18px] px-[5px] py-0 transition-[color,background-color,border-color]",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground",
+        reversed: "bg-background text-foreground",
+        disabled: "bg-tint-950-reversed border border-black-alpha-600 text-black-alpha-600 backdrop-blur-lg",
+        white: "bg-white text-black",
+        black: "bg-brand-midnight-900 text-white"
+      },
+      pulse: {
+        true: "relative",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        pulse: true,
+        class: "before:content-[''] before:absolute before:inset-[-4px] before:rounded-full before:border-4 before:border-solid before:border-(--notification-badge-pulse-color,var(--color-surface-alpha-alpha-brand-light-30)) before:pointer-events-none before:animate-notification-badge-ping motion-reduce:before:animate-none"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      pulse: false
+    }
+  }
+);
+function NotificationBadge({
+  className,
+  variant,
+  pulse = false,
+  count,
+  children,
+  render,
+  ...props
+}) {
+  const displayContent = count !== void 0 ? String(count) : children;
+  const defaultProps = {
+    "data-slot": "notification-badge",
+    className: cn(notificationBadgeVariants({ variant, pulse }), className),
+    children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center", children: displayContent })
+  };
+  return useRender.useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps.mergeProps(defaultProps, props)
+  });
+}
+var avatarVariants = classVarianceAuthority.cva(
+  "group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:mix-blend-darken dark:after:mix-blend-lighten",
+  {
+    variants: {
+      size: {
+        xs: "size-6",
+        // 24px
+        sm: "size-8",
+        // 32px
+        md: "size-14",
+        // 56px
+        lg: "size-20",
+        // 80px
+        xl: "size-[120px]",
+        xxl: "size-[140px]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function Avatar({ className = "", size = "md", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    avatar.Avatar.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      className: cn(avatarVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function AvatarImage({ className = "", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    avatar.Avatar.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full mask mask-squircle object-cover", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({ className = "", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    avatar.Avatar.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarBadge({ className = "", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    NotificationBadge,
+    {
+      "data-slot": "avatar-badge",
+      className: cn(
+        "absolute h-[18px] min-w-[18px] z-10 select-none",
+        "leading-none",
+        "group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
+        "group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
+        "group-data-[size=md]/avatar:right-[-4px] group-data-[size=md]/avatar:bottom-[-4px]",
+        "group-data-[size=lg]/avatar:right-[-2px] group-data-[size=lg]/avatar:bottom-[-2px]",
+        "group-data-[size=xl]/avatar:right-[3px] group-data-[size=xl]/avatar:bottom-[3px]",
+        "group-data-[size=xxl]/avatar:right-[11px] group-data-[size=xxl]/avatar:bottom-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarGroup({ className = "", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "avatar-group",
+      className: cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarGroupCount({ className = "", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "avatar-group-count",
+      className: cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var bannerNotificationVariants = classVarianceAuthority.cva(
   "flex items-start gap-3 rounded-[6px] px-4 py-3 w-full w-[360px] border-border border",
   {
@@ -1560,55 +1712,6 @@ function Logo({
     }
   );
 }
-var notificationBadgeVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center rounded-full box-border shrink-0 whitespace-nowrap text-xs font-medium leading-[18px] min-w-[18px] h-[18px] px-[5px] py-0 transition-[color,background-color,border-color]",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground",
-        reversed: "bg-background text-foreground",
-        disabled: "bg-tint-950-reversed border border-black-alpha-600 text-black-alpha-600 backdrop-blur-lg",
-        white: "bg-white text-black",
-        black: "bg-brand-midnight-900 text-white"
-      },
-      pulse: {
-        true: "relative",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      {
-        pulse: true,
-        class: "before:content-[''] before:absolute before:inset-[-4px] before:rounded-full before:border-4 before:border-solid before:border-(--notification-badge-pulse-color,var(--color-surface-alpha-alpha-brand-light-30)) before:pointer-events-none before:animate-notification-badge-ping motion-reduce:before:animate-none"
-      }
-    ],
-    defaultVariants: {
-      variant: "default",
-      pulse: false
-    }
-  }
-);
-function NotificationBadge({
-  className,
-  variant,
-  pulse = false,
-  count,
-  children,
-  render,
-  ...props
-}) {
-  const displayContent = count !== void 0 ? String(count) : children;
-  const defaultProps = {
-    "data-slot": "notification-badge",
-    className: cn(notificationBadgeVariants({ variant, pulse }), className),
-    children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center", children: displayContent })
-  };
-  return useRender.useRender({
-    defaultTagName: "div",
-    render,
-    props: mergeProps.mergeProps(defaultProps, props)
-  });
-}
 var SectionFlourish = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center self-stretch py-8 text-xl", children: "\u2726" });
 function TooltipProvider({ delay = 0, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Provider, { "data-slot": "tooltip-provider", delay, ...props });
@@ -1875,6 +1978,12 @@ function TemplateHeader({ className, image }) {
   );
 }
 
+exports.Avatar = Avatar;
+exports.AvatarBadge = AvatarBadge;
+exports.AvatarFallback = AvatarFallback;
+exports.AvatarGroup = AvatarGroup;
+exports.AvatarGroupCount = AvatarGroupCount;
+exports.AvatarImage = AvatarImage;
 exports.BannerNotification = BannerNotification;
 exports.Button = Button;
 exports.ButtonLink = ButtonLink;