@momentumworld/ui-react 0.17.0

package/src/components/ui/avatar.tsx

@@ -0,0 +1,285 @@
+"use client";
+
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CheckIcon, PlusIcon, UserRoundIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const avatarVariants = cva(
+  "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-muted align-middle font-medium",
+  {
+    defaultVariants: { size: "sm" },
+    variants: {
+      size: {
+        xs: "size-6 text-[0.625rem]",
+        sm: "size-8 text-xs",
+        md: "size-10 text-sm",
+        lg: "size-12 text-base",
+        xl: "size-14 text-lg",
+        "2xl": "size-16 text-xl",
+      },
+    },
+  },
+);
+
+type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
+
+interface AvatarProps
+  extends AvatarPrimitive.Root.Props,
+    VariantProps<typeof avatarVariants> {
+  /** Image URL. When omitted or it fails to load, the fallback is shown. */
+  src?: string;
+  alt?: string;
+  /** Initials shown when there is no image. */
+  initials?: React.ReactNode;
+  /** Custom fallback node (overrides initials and the placeholder icon). */
+  placeholder?: React.ReactNode;
+  /** Icon component used as the fallback when nothing else is provided. */
+  placeholderIcon?: React.ElementType;
+  /** A presence dot in the bottom-right corner. */
+  status?: "online" | "offline";
+  /** Shows a verified tick in the bottom-right corner. */
+  verified?: boolean;
+  /** A node (e.g. <AvatarCompanyIcon />) shown in the top-right corner. */
+  badge?: React.ReactNode;
+}
+
+function Avatar({
+  className,
+  size,
+  src,
+  alt,
+  initials,
+  placeholder,
+  placeholderIcon: PlaceholderIcon = UserRoundIcon,
+  status,
+  verified,
+  badge,
+  children,
+  ...props
+}: AvatarProps) {
+  const fallback = initials ? (
+    initials
+  ) : (
+    (placeholder ?? <PlaceholderIcon className="size-[55%] text-muted-foreground" />)
+  );
+
+  const root = (
+    <AvatarPrimitive.Root
+      className={cn(avatarVariants({ size }), className)}
+      data-slot="avatar"
+      {...props}
+    >
+      {children ?? (
+        <>
+          {src ? <AvatarImage alt={alt} src={src} /> : null}
+          <AvatarFallback>{fallback}</AvatarFallback>
+        </>
+      )}
+    </AvatarPrimitive.Root>
+  );
+
+  if (!(status || verified || badge)) return root;
+
+  // Overlays live in a non-clipping wrapper so the rounded avatar's
+  // overflow-hidden doesn't cut them off at the corners.
+  return (
+    <span
+      className="relative inline-flex shrink-0 align-middle"
+      data-slot="avatar-root"
+    >
+      {root}
+      {badge ? (
+        <span className="absolute end-0 top-0 flex" data-slot="avatar-badge">
+          {badge}
+        </span>
+      ) : null}
+      {status ? (
+        <span
+          className="absolute end-[6%] bottom-[6%] h-1/4 w-1/4 rounded-full ring-2 ring-background data-[status=offline]:bg-muted-foreground/40 data-[status=online]:bg-success"
+          data-slot="avatar-status"
+          data-status={status}
+        />
+      ) : null}
+      {verified ? (
+        <span
+          className="absolute end-0 bottom-0 flex h-1/3 w-1/3 items-center justify-center rounded-full bg-brand text-background ring-2 ring-background"
+          data-slot="avatar-verified"
+        >
+          <CheckIcon className="size-2/3" strokeWidth={3} />
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      className={cn("size-full object-cover", className)}
+      data-slot="avatar-image"
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        "flex size-full items-center justify-center rounded-[inherit] bg-muted text-muted-foreground",
+        className,
+      )}
+      data-slot="avatar-fallback"
+      {...props}
+    />
+  );
+}
+
+/** A small company/brand logo badge, meant for the Avatar `badge` prop. */
+function AvatarCompanyIcon({
+  className,
+  size = "md",
+  alt,
+  ...props
+}: React.ComponentProps<"img"> & { size?: "sm" | "md" | "lg" }) {
+  const sizes = { lg: "size-5", md: "size-4", sm: "size-3.5" } as const;
+  return (
+    // biome-ignore lint/a11y/useAltText: alt forwarded via props
+    <img
+      alt={alt}
+      className={cn(
+        "rounded-[4px] object-cover ring-2 ring-background",
+        sizes[size],
+        className,
+      )}
+      data-slot="avatar-company-icon"
+      {...props}
+    />
+  );
+}
+
+/** A dashed "add" button sized to match avatars — for avatar groups. */
+function AvatarAddButton({
+  className,
+  size = "sm",
+  ...props
+}: React.ComponentProps<"button"> & { size?: AvatarSize }) {
+  return (
+    <button
+      className={cn(
+        avatarVariants({ size }),
+        "border border-input border-dashed bg-transparent text-muted-foreground outline-none transition-colors hover:border-transparent hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        className,
+      )}
+      data-slot="avatar-add-button"
+      type="button"
+      {...props}
+    >
+      <PlusIcon className="size-1/2" />
+    </button>
+  );
+}
+
+const labelGroupText = {
+  lg: { subtitle: "text-sm", title: "text-base" },
+  md: { subtitle: "text-sm", title: "text-sm" },
+  sm: { subtitle: "text-xs", title: "text-sm" },
+} as const;
+
+/** An avatar paired with a title and subtitle. */
+function AvatarLabelGroup({
+  className,
+  size = "md",
+  src,
+  alt,
+  initials,
+  status,
+  verified,
+  title,
+  subtitle,
+  ...props
+}: React.ComponentProps<"div"> & {
+  size?: "sm" | "md" | "lg";
+  src?: string;
+  alt?: string;
+  initials?: string;
+  status?: "online" | "offline";
+  verified?: boolean;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn("flex items-center gap-3", className)}
+      data-slot="avatar-label-group"
+      {...props}
+    >
+      <Avatar
+        alt={alt}
+        initials={initials}
+        size={size}
+        src={src}
+        status={status}
+        verified={verified}
+      />
+      <div className="flex min-w-0 flex-col">
+        <span
+          className={cn(
+            "truncate font-medium text-foreground leading-tight",
+            labelGroupText[size].title,
+          )}
+        >
+          {title}
+        </span>
+        {subtitle ? (
+          <span
+            className={cn(
+              "truncate text-muted-foreground leading-tight",
+              labelGroupText[size].subtitle,
+            )}
+          >
+            {subtitle}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+const profilePhotoSizes = { lg: "size-20", md: "size-16", sm: "size-14" } as const;
+
+/** A larger, framed profile photo with optional verified tick. */
+function AvatarProfilePhoto({
+  className,
+  size = "md",
+  ...props
+}: Omit<AvatarProps, "size"> & { size?: "sm" | "md" | "lg" }) {
+  return (
+    <Avatar
+      className={cn(
+        "ring-1 ring-black/8 ring-inset dark:ring-white/12",
+        profilePhotoSizes[size],
+        className,
+      )}
+      data-slot="avatar-profile-photo"
+      {...props}
+    />
+  );
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarCompanyIcon,
+  AvatarAddButton,
+  AvatarLabelGroup,
+  AvatarProfilePhoto,
+  avatarVariants,
+};

package/src/components/ui/badge-group.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ArrowRightIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const badgeGroupVariants = cva(
+  "relative inline-flex max-w-full shrink-0 items-center gap-2 whitespace-nowrap border border-transparent font-medium text-sm outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background sm:text-xs [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [button,a&]:cursor-pointer [button,a&]:pointer-coarse:after:absolute [button,a&]:pointer-coarse:after:size-full [button,a&]:pointer-coarse:after:min-h-11 [button,a&]:pointer-coarse:after:min-w-11",
+  {
+    compoundVariants: [
+      {
+        className: "bg-secondary text-secondary-foreground",
+        color: "gray",
+        variant: "pill",
+      },
+      {
+        className: "bg-brand/12 text-sidebar-primary dark:bg-brand/20",
+        color: "brand",
+        variant: "pill",
+      },
+      {
+        className:
+          "bg-destructive/8 text-destructive-foreground dark:bg-destructive/16",
+        color: "error",
+        variant: "pill",
+      },
+      {
+        className: "bg-warning/8 text-warning-foreground dark:bg-warning/16",
+        color: "warning",
+        variant: "pill",
+      },
+      {
+        className: "bg-success/8 text-success-foreground dark:bg-success/16",
+        color: "success",
+        variant: "pill",
+      },
+    ],
+    defaultVariants: {
+      align: "leading",
+      color: "gray",
+      variant: "pill",
+    },
+    variants: {
+      align: {
+        leading: "p-1 pe-2.5",
+        trailing: "p-1 ps-3",
+      },
+      color: {
+        brand: "",
+        error: "",
+        gray: "",
+        success: "",
+        warning: "",
+      },
+      variant: {
+        modern:
+          "rounded-[10px] border-input bg-background text-foreground shadow-xs dark:bg-input/32",
+        pill: "rounded-full",
+      },
+    },
+  },
+);
+
+type BadgeGroupColor = NonNullable<
+  VariantProps<typeof badgeGroupVariants>["color"]
+>;
+
+/** Ring tint of the inner pill badge, per color. */
+const pillBadgeRing: Record<BadgeGroupColor, string> = {
+  brand: "ring-brand/48",
+  error: "ring-destructive/32",
+  gray: "ring-border",
+  success: "ring-success/32",
+  warning: "ring-warning/40",
+};
+
+/** Status dot of the inner modern badge, per color. */
+const modernBadgeDot: Record<BadgeGroupColor, string> = {
+  brand: "bg-brand",
+  error: "bg-destructive",
+  gray: "bg-muted-foreground",
+  success: "bg-success",
+  warning: "bg-warning",
+};
+
+interface BadgeGroupProps
+  extends Omit<useRender.ComponentProps<"span">, "color"> {
+  /** `pill` is a tonal, fully-rounded chip; `modern` is a bordered card-style chip with a status dot. */
+  variant?: VariantProps<typeof badgeGroupVariants>["variant"];
+  color?: BadgeGroupColor;
+  /** Which side of the message the inner badge sits on. */
+  align?: VariantProps<typeof badgeGroupVariants>["align"];
+  /** Short label rendered inside the inner badge. */
+  badge: React.ReactNode;
+  /** Arrow shown after the message (leading) or inside the badge (trailing). Pass `null` to hide. */
+  icon?: React.ReactNode;
+}
+
+function BadgeGroup({
+  className,
+  variant = "pill",
+  color = "gray",
+  align = "leading",
+  badge,
+  icon,
+  children,
+  render,
+  ...props
+}: BadgeGroupProps) {
+  const arrow =
+    icon === null ? null : (icon ?? <ArrowRightIcon className="rtl:-scale-x-100" />);
+
+  const innerBadge = (
+    <span
+      className={cn(
+        "inline-flex shrink-0 items-center gap-1.5 bg-background px-2.5 py-0.5",
+        variant === "modern"
+          ? "rounded-md border border-input shadow-xs dark:bg-input/32"
+          : cn("rounded-full ring-1 ring-inset", pillBadgeRing[color]),
+        align === "trailing" && "pe-2",
+      )}
+      data-slot="badge-group-badge"
+    >
+      {variant === "modern" ? (
+        <span
+          className={cn("size-1.5 rounded-full", modernBadgeDot[color])}
+          data-slot="badge-group-dot"
+        />
+      ) : null}
+      {badge}
+      {align === "trailing" ? arrow : null}
+    </span>
+  );
+
+  const defaultProps = {
+    className: cn(badgeGroupVariants({ align, className, color, variant })),
+    "data-slot": "badge-group",
+    children: (
+      <>
+        {align === "leading" ? innerBadge : null}
+        <span className="truncate" data-slot="badge-group-text">
+          {children}
+        </span>
+        {align === "leading" ? arrow : innerBadge}
+      </>
+    ),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(defaultProps, props),
+    render,
+  });
+}
+
+export { BadgeGroup, badgeGroupVariants };

package/src/components/ui/badge.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { XIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const badgeVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap border border-transparent font-medium outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [button,a&]:cursor-pointer [button,a&]:pointer-coarse:after:absolute [button,a&]:pointer-coarse:after:size-full [button,a&]:pointer-coarse:after:min-h-11 [button,a&]:pointer-coarse:after:min-w-11",
+  {
+    compoundVariants: [
+      { className: "rounded-sm", shape: "default", size: ["default", "lg"] },
+      {
+        className: "rounded-[calc(var(--radius-sm)-2px)]",
+        shape: "default",
+        size: "sm",
+      },
+    ],
+    defaultVariants: {
+      shape: "default",
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      shape: {
+        default: "",
+        pill: "rounded-full",
+      },
+      size: {
+        default:
+          "h-5.5 min-w-5.5 px-[calc(--spacing(2)-1px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs",
+        lg: "h-6.5 min-w-6.5 px-[calc(--spacing(2.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm",
+        sm: "h-5 min-w-5 px-[calc(--spacing(1.5)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]",
+      },
+      variant: {
+        default:
+          "bg-primary text-primary-foreground [button,a&]:hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white [button,a&]:hover:bg-destructive/90",
+        error:
+          "bg-destructive/8 text-destructive-foreground dark:bg-destructive/16",
+        info: "bg-info/8 text-info-foreground dark:bg-info/16",
+        modern:
+          "border-input bg-background text-foreground shadow-xs dark:bg-input/32 [button,a&]:hover:bg-accent/50 dark:[button,a&]:hover:bg-input/48",
+        outline:
+          "border-input bg-background text-foreground dark:bg-input/32 [button,a&]:hover:bg-accent/50 dark:[button,a&]:hover:bg-input/48",
+        secondary:
+          "bg-secondary text-secondary-foreground [button,a&]:hover:bg-secondary/90",
+        success: "bg-success/8 text-success-foreground dark:bg-success/16",
+        warning: "bg-warning/8 text-warning-foreground dark:bg-warning/16",
+      },
+    },
+  },
+);
+
+interface BadgeProps extends useRender.ComponentProps<"span"> {
+  variant?: VariantProps<typeof badgeVariants>["variant"];
+  size?: VariantProps<typeof badgeVariants>["size"];
+  shape?: VariantProps<typeof badgeVariants>["shape"];
+}
+
+function Badge({
+  className,
+  variant,
+  size,
+  shape,
+  render,
+  ...props
+}: BadgeProps) {
+  const defaultProps = {
+    className: cn(badgeVariants({ className, shape, size, variant })),
+    "data-slot": "badge",
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(defaultProps, props),
+    render,
+  });
+}
+
+/** A small status dot. Inherits the badge's text color; recolor via className. */
+function BadgeDot({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "size-1.5 shrink-0 rounded-full bg-current sm:size-[5px]",
+        className,
+      )}
+      data-slot="badge-dot"
+      {...props}
+    />
+  );
+}
+
+/** A tiny round avatar image sized to sit inside a badge. */
+function BadgeAvatar({ alt, className, ...props }: React.ComponentProps<"img">) {
+  return (
+    // biome-ignore lint/a11y/useAltText: alt forwarded via props
+    <img
+      alt={alt}
+      className={cn(
+        "size-4 shrink-0 rounded-full object-cover sm:size-3.5",
+        className,
+      )}
+      data-slot="badge-avatar"
+      {...props}
+    />
+  );
+}
+
+/** A round country flag. `country` is an ISO 3166-1 alpha-2 code (e.g. "AU"). */
+function BadgeFlag({
+  alt,
+  className,
+  country,
+  src,
+  ...props
+}: React.ComponentProps<"img"> & { country?: string }) {
+  return (
+    // biome-ignore lint/a11y/useAltText: alt forwarded via props
+    <img
+      alt={alt ?? country}
+      className={cn(
+        "size-4 shrink-0 rounded-full object-cover sm:size-3.5",
+        className,
+      )}
+      data-slot="badge-flag"
+      src={
+        src ??
+        (country
+          ? `https://hatscripts.github.io/circle-flags/flags/${country.toLowerCase()}.svg`
+          : undefined)
+      }
+      {...props}
+    />
+  );
+}
+
+/** A small remove button for dismissible badges. Renders an X by default. */
+function BadgeCloseButton({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"button">) {
+  return (
+    <button
+      className={cn(
+        "-me-px inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full text-current opacity-64 outline-none transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring",
+        className,
+      )}
+      data-slot="badge-close-button"
+      type="button"
+      {...props}
+    >
+      {children ?? <XIcon className="pointer-events-none" />}
+    </button>
+  );
+}
+
+export {
+  Badge,
+  BadgeDot,
+  BadgeAvatar,
+  BadgeFlag,
+  BadgeCloseButton,
+  badgeVariants,
+};