@popgrids/ui 0.0.31 → 0.0.33

package/dist/index.d.cts

@@ -1,3 +1,4 @@
+export { Avatar, AvatarBadge, AvatarBadgeProps, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupCount, AvatarGroupCountProps, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarProps, AvatarSize } from './avatar.cjs';
 export { BannerNotification, BannerNotificationProps, BannerNotificationTheme, BannerNotificationVariant } from './banner-notification.cjs';
 export { Button, ButtonProps } from './button.cjs';
 export { ButtonLink, ButtonLinkProps } from './button-link.cjs';
@@ -20,12 +21,14 @@ export { Textarea, TextareaProps } from './textarea.cjs';
 export { TemplateHeader, TemplateHeaderProps } from './template-header.cjs';
 export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip.cjs';
 import 'react/jsx-runtime';
+import '@base-ui/react/avatar';
+import 'react';
+import './types.d-DDkXskpi.cjs';
+import '@base-ui/react/use-render';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
-import 'react';
 import '@base-ui/react/button';
 import '@base-ui/react/checkbox';
 import '@base-ui/react/dialog';
 import '@base-ui/react/menu';
-import '@base-ui/react/use-render';
 import '@base-ui/react/tooltip';

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { Avatar, AvatarBadge, AvatarBadgeProps, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupCount, AvatarGroupCountProps, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarProps, AvatarSize } from './avatar.js';
 export { BannerNotification, BannerNotificationProps, BannerNotificationTheme, BannerNotificationVariant } from './banner-notification.js';
 export { Button, ButtonProps } from './button.js';
 export { ButtonLink, ButtonLinkProps } from './button-link.js';
@@ -20,12 +21,14 @@ export { Textarea, TextareaProps } from './textarea.js';
 export { TemplateHeader, TemplateHeaderProps } from './template-header.js';
 export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip.js';
 import 'react/jsx-runtime';
+import '@base-ui/react/avatar';
+import 'react';
+import './types.d-DDkXskpi.js';
+import '@base-ui/react/use-render';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
-import 'react';
 import '@base-ui/react/button';
 import '@base-ui/react/checkbox';
 import '@base-ui/react/dialog';
 import '@base-ui/react/menu';
-import '@base-ui/react/use-render';
 import '@base-ui/react/tooltip';

package/dist/index.js

@@ -1,21 +1,173 @@
+import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
 import { Check, XClose, ChevronRight, InfoCircle } from '@untitledui/icons';
 import { Dialog } from '@base-ui/react/dialog';
 import { Menu } from '@base-ui/react/menu';
 import { Input as Input$1 } from '@base-ui/react/input';
-import { mergeProps } from '@base-ui/react/merge-props';
-import { useRender } from '@base-ui/react/use-render';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 
-// src/components/banner-notification/banner-notification.tsx
+// src/components/avatar/avatar.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+var notificationBadgeVariants = 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__ */ jsx("span", { className: "text-center", children: displayContent })
+  };
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps(defaultProps, props)
+  });
+}
+var avatarVariants = 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__ */ jsx(
+    Avatar$1.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      className: cn(avatarVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function AvatarImage({ className = "", ...props }) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full mask mask-squircle object-cover", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({ className = "", ...props }) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.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__ */ 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__ */ 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__ */ 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 = cva(
   "flex items-start gap-3 rounded-[6px] px-4 py-3 w-full w-[360px] border-border border",
   {
@@ -1558,55 +1710,6 @@ function Logo({
     }
   );
 }
-var notificationBadgeVariants = 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__ */ jsx("span", { className: "text-center", children: displayContent })
-  };
-  return useRender({
-    defaultTagName: "div",
-    render,
-    props: mergeProps(defaultProps, props)
-  });
-}
 var SectionFlourish = () => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center self-stretch py-8 text-xl", children: "\u2726" });
 function TooltipProvider({ delay = 0, ...props }) {
   return /* @__PURE__ */ jsx(Tooltip$1.Provider, { "data-slot": "tooltip-provider", delay, ...props });
@@ -1873,6 +1976,6 @@ function TemplateHeader({ className, image }) {
   );
 }
 
-export { BannerNotification, Button, ButtonLink, Checkbox, ContentBlock, DefaultHeader, DialogRoot as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Footer, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Loader, Logo, NotificationBadge, SectionFlourish, SectionHeader, Tag, TemplateHeader, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, BannerNotification, Button, ButtonLink, Checkbox, ContentBlock, DefaultHeader, DialogRoot as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Footer, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Loader, Logo, NotificationBadge, SectionFlourish, SectionHeader, Tag, TemplateHeader, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map