@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/styles/variables.css

@@ -0,0 +1,229 @@
+:root {
+  /* themes - light */
+  --brand-primary: var(--blue-6);
+  --brand-hover: var(--blue-5);
+  --brand-pressed: var(--blue-8);
+  --alt-primary: var(--gray-1);
+  --alt-hover: var(--gray-2);
+  --alt-pressed: var(--gray-1);
+  --group-primary: var(--white-1);
+  --group-hover: var(--gray-1);
+  --group-pressed: var(--gray-2);
+  --text-highlight: var(--black-1);
+  --text-primary: var(--gray-9);
+  --text-secondary: var(--gray-7);
+  --text-tertiary: var(--gray-5);
+  --text-withbg: var(--white-1);
+  --bg-highlight: var(--black-1);
+  --bg-primary: var(--white-1);
+  --bg-secondary: var(--white-alpha-1);
+  --bg-tertiary: var(--gray-2);
+  --bg-quaternary: var(--gray-3);
+  --bg-mask: var(--black-alpha-5);
+  --icon-highlight: var(--black-1);
+  --icon-primary: var(--gray-8);
+  --icon-secondary: var(--gray-6);
+  --icon-tertiary: var(--gray-4);
+  --icon-withbg: var(--white-1);
+  --danger-primary: var(--red-6);
+  --danger-secondary: var(--red-4);
+  --danger-tertiary: var(--red-8);
+  --accent-warning: var(--yellow-6);
+  --accent-success: var(--green-6);
+  --line-primary: var(--gray-2);
+  --line-secondary: var(--gray-1);
+  --shadow-primary: var(--black-alpha-3);
+  --shadow-secondary: var(--black-alpha-4);
+  --shadow-tertiary: var(--black-alpha-4);
+  --select-secondary: var(--white-alpha-1);
+
+  /* color - scheme */
+  --black-1: rgba(0, 0, 0, 1);
+  --black-2: rgba(0, 0, 0, 0.9);
+  --black-3: rgba(0, 0, 0, 0.7);
+  --black-4: rgba(0, 0, 0, 0.5);
+  --black-alpha-1: rgba(0, 0, 0, 0.6);
+  --black-alpha-2: rgba(0, 0, 0, 0.2);
+  --black-alpha-3: rgba(0, 0, 0, 0.1);
+  --black-alpha-4: rgba(0, 0, 0, 0.06);
+  --black-alpha-5: rgba(56, 57, 59, 0.5);
+  --black-alpha-6: rgba(90, 93, 98, 0.3);
+  --black-alpha-7: rgba(75, 77, 83, 0.5);
+  --white-1: rgba(255, 255, 255, 1);
+  --white-alpha-1: rgba(227, 230, 235, 0.6);
+  --white-alpha-2: rgba(173, 176, 183, 0.6);
+  --white-alpha-3: rgba(246, 247, 248, 0.8);
+  --blue-1: rgba(230, 246, 255, 1);
+  --blue-2: rgba(163, 220, 255, 1);
+  --blue-3: rgba(122, 200, 255, 1);
+  --blue-4: rgba(82, 177, 255, 1);
+  --blue-5: rgba(41, 151, 255, 1);
+  --blue-6: rgba(0, 123, 255, 1);
+  --blue-7: rgba(0, 98, 217, 1);
+  --blue-8: rgba(0, 74, 179, 1);
+  --blue-9: rgba(0, 54, 140, 1);
+  --blue-10: rgba(0, 36, 102, 1);
+  --gray-1: rgba(245, 245, 245, 1);
+  --gray-2: rgba(220, 222, 229, 1);
+  --gray-3: rgba(202, 206, 217, 1);
+  --gray-4: rgba(181, 184, 196, 1);
+  --gray-5: rgba(147, 150, 159, 1);
+  --gray-6: rgba(121, 124, 131, 1);
+  --gray-7: rgba(87, 90, 96, 1);
+  --gray-8: rgba(75, 77, 83, 1);
+  --gray-9: rgba(52, 53, 56, 1);
+  --gray-10: rgba(29, 29, 30, 1);
+  --red-1: rgba(255, 240, 240, 1);
+  --red-2: rgba(255, 232, 232, 1);
+  --red-3: rgba(255, 191, 192, 1);
+  --red-4: rgba(255, 150, 156, 1);
+  --red-5: rgba(255, 110, 122, 1);
+  --red-6: rgba(255, 69, 91, 1);
+  --red-7: rgba(217, 48, 73, 1);
+  --red-8: rgba(179, 30, 58, 1);
+  --red-9: rgba(140, 17, 44, 1);
+  --red-10: rgba(102, 11, 34, 1);
+  --yellow-1: rgba(255, 253, 240, 1);
+  --yellow-2: rgba(255, 248, 214, 1);
+  --yellow-3: rgba(255, 237, 173, 1);
+  --yellow-4: rgba(255, 224, 133, 1);
+  --yellow-5: rgba(255, 209, 92, 1);
+  --yellow-6: rgba(251, 187, 49, 1);
+  --yellow-7: rgba(212, 149, 32, 1);
+  --yellow-8: rgba(173, 114, 17, 1);
+  --yellow-9: rgba(135, 82, 7, 1);
+  --yellow-10: rgba(97, 55, 4, 1);
+  --green-1: rgba(240, 255, 243, 1);
+  --green-2: rgba(228, 242, 231, 1);
+  --green-3: rgba(211, 230, 216, 1);
+  --green-4: rgba(165, 217, 181, 1);
+  --green-5: rgba(122, 204, 151, 1);
+  --green-6: rgba(84, 190, 125, 1);
+  --green-7: rgba(60, 153, 99, 1);
+  --green-8: rgba(39, 115, 73, 1);
+  --green-9: rgba(22, 77, 48, 1);
+  --green-10: rgba(11, 38, 25, 1);
+
+  --radius: 0.25rem; /* 4px */
+  --spacing: 0.25rem; /* 4px */
+}
+
+.dark {
+  color-scheme: dark;
+  --brand-primary: var(--blue-6);
+  --brand-hover: var(--blue-5);
+  --brand-pressed: var(--blue-8);
+  --alt-primary: var(--gray-9);
+  --alt-hover: var(--gray-7);
+  --alt-pressed: var(--gray-8);
+  --group-primary: var(--black-1);
+  --group-hover: var(--gray-9);
+  --group-pressed: var(--gray-10);
+  --text-highlight: var(--white-1);
+  --text-primary: var(--gray-2);
+  --text-secondary: var(--gray-5);
+  --text-tertiary: var(--gray-6);
+  --text-withbg: var(--white-1);
+  --bg-highlight: var(--white-1);
+  --bg-primary: var(--gray-10);
+  --bg-secondary: var(--black-alpha-6);
+  --bg-tertiary: var(--gray-8);
+  --bg-quaternary: var(--gray-7);
+  --bg-mask: var(--black-alpha-5);
+  --icon-highlight: var(--white-1);
+  --icon-primary: var(--gray-2);
+  --icon-secondary: var(--gray-5);
+  --icon-tertiary: var(--gray-6);
+  --icon-withbg: var(--white-1);
+  --danger-primary: var(--red-6);
+  --danger-secondary: var(--red-4);
+  --danger-tertiary: var(--red-8);
+  --accent-warning: var(--yellow-6);
+  --accent-success: var(--green-6);
+  --line-primary: var(--gray-8);
+  --line-secondary: var(--gray-9);
+  --shadow-primary: var(--black-alpha-1);
+  --shadow-secondary: var(--black-alpha-2);
+  --shadow-tertiary: var(--black-alpha-6);
+  --select-secondary: var(--black-alpha-5);
+}
+
+.liquid-light {
+  color-scheme: light;
+  --brand-primary: var(--blue-6);
+  --brand-hover: var(--blue-5);
+  --brand-pressed: var(--blue-8);
+  --alt-primary: var(--gray-1);
+  --alt-hover: var(--gray-2);
+  --alt-pressed: var(--gray-1);
+  --group-primary: var(--white-1);
+  --group-hover: var(--gray-1);
+  --group-pressed: var(--gray-2);
+  --text-highlight: var(--black-1);
+  --text-primary: var(--gray-9);
+  --text-secondary: var(--gray-7);
+  --text-tertiary: var(--gray-5);
+  --text-withbg: var(--white-1);
+  --bg-highlight: var(--black-1);
+  --bg-primary: var(--white-1);
+  --bg-secondary: var(--white-alpha-1);
+  --bg-tertiary: var(--gray-2);
+  --bg-quaternary: var(--gray-3);
+  --bg-mask: var(--white-alpha-3);
+  --icon-highlight: var(--black-1);
+  --icon-primary: var(--gray-8);
+  --icon-secondary: var(--gray-6);
+  --icon-tertiary: var(--gray-4);
+  --icon-withbg: var(--white-1);
+  --danger-primary: var(--red-6);
+  --danger-secondary: var(--red-4);
+  --danger-tertiary: var(--red-8);
+  --accent-warning: var(--yellow-6);
+  --accent-success: var(--green-6);
+  --line-primary: var(--white-alpha-2);
+  --line-secondary: var(--gray-1);
+  --shadow-primary: var(--black-alpha-3);
+  --shadow-secondary: var(--black-alpha-4);
+  --shadow-tertiary: var(--black-alpha-4);
+  --select-secondary: var(--white-alpha-1);
+}
+
+.liquid-dark {
+  color-scheme: dark;
+  --brand-primary: var(--blue-6);
+  --brand-hover: var(--blue-5);
+  --brand-pressed: var(--blue-8);
+  --alt-primary: var(--gray-9);
+  --alt-hover: var(--gray-7);
+  --alt-pressed: var(--gray-8);
+  --group-primary: var(--white-1);
+  --group-hover: var(--gray-9);
+  --group-pressed: var(--gray-2);
+  --text-highlight: var(--white-1);
+  --text-primary: var(--gray-2);
+  --text-secondary: var(--gray-5);
+  --text-tertiary: var(--gray-6);
+  --text-withbg: var(--white-1);
+  --bg-highlight: var(--white-1);
+  --bg-primary: var(--gray-10);
+  --bg-secondary: var(--black-alpha-6);
+  --bg-tertiary: var(--gray-8);
+  --bg-quaternary: var(--gray-7);
+  --bg-mask: var(--black-alpha-5);
+  --icon-highlight: var(--white-1);
+  --icon-primary: var(--gray-2);
+  --icon-secondary: var(--gray-5);
+  --icon-tertiary: var(--gray-6);
+  --icon-withbg: var(--white-1);
+  --danger-primary: var(--red-6);
+  --danger-secondary: var(--red-4);
+  --danger-tertiary: var(--red-8);
+  --accent-warning: var(--yellow-6);
+  --accent-success: var(--green-6);
+  --line-primary: var(--black-alpha-7);
+  --line-secondary: var(--gray-9);
+  --shadow-primary: var(--black-alpha-1);
+  --shadow-secondary: var(--black-alpha-2);
+  --shadow-tertiary: var(--black-alpha-6);
+  --select-secondary: var(--black-alpha-5);
+}

package/src/ui/UIKitBadge.tsx

@@ -0,0 +1,171 @@
+import { GitBranch } from "lucide-react";
+import React from "react";
+
+// Version info - fallback to direct import if build-time replacement fails
+import packageJson from "../../package.json";
+import { cn } from "../hooks";
+
+declare const __PACKAGE_VERSION__: string;
+declare const __PACKAGE_NAME__: string;
+declare const __GIT_HASH__: string;
+
+const PACKAGE_VERSION =
+  typeof __PACKAGE_VERSION__ !== "undefined" ? __PACKAGE_VERSION__ : packageJson.version;
+const PACKAGE_NAME = typeof __PACKAGE_NAME__ !== "undefined" ? __PACKAGE_NAME__ : packageJson.name;
+const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : "unknown";
+
+interface PackageBadgeProps {
+  /**
+   * Additional CSS classes to apply to the badge
+   */
+  className?: string;
+  /**
+   * Package name to display (e.g., "vuer", "uikit")
+   */
+  packageName?: string;
+  /**
+   * Full package name for npm link (e.g., "@vuer-ai/vuer-uikit")
+   */
+  packageFullName?: string;
+  /**
+   * Version string to display (e.g., "v0.0.72" or "0.0.72")
+   */
+  versionText?: string;
+  /**
+   * Whether the version should be clickable (links to npm)
+   */
+  linkable?: boolean;
+  /**
+   * Git hash to display (if provided)
+   */
+  gitHash?: string;
+}
+
+/**
+ * Low-level badge component that displays package information with provided values
+ */
+function PackageBadge({
+  className,
+  packageName,
+  packageFullName,
+  versionText,
+  linkable = true,
+  gitHash,
+}: PackageBadgeProps) {
+  const npmUrl =
+    packageFullName && versionText
+      ? `https://www.npmjs.com/package/${packageFullName}/v/${versionText.replace("v", "")}`
+      : undefined;
+
+  return (
+    <div
+      className={`rounded-uk-xs rounded-r-uk-xs text-uk-sm bg-icon-withbg inline-flex items-center ${className || ""}`}
+      style={linkable ? { cursor: "pointer" } : undefined}
+    >
+      {(packageName || versionText) && (
+        <div className="rounded-uk-xs inline-flex items-center overflow-hidden">
+          {packageName && (
+            <span
+              className="pl-sm pr-xs py-xxxs bg-brand-primary text-text-withbg text-uk-xs"
+              style={{
+                backgroundColor: "var(--color-brand-primary, var(--brand-primary))",
+                color: "white",
+                textShadow: "0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.1)",
+              }}
+            >
+              {packageName}
+            </span>
+          )}
+          {versionText && (
+            <a
+              href={linkable && npmUrl ? npmUrl : undefined}
+              className={cn(
+                "pl-xs pr-sm py-xxxs rounded-r-uk-xs",
+                "bg-alt-primary",
+                "text-text-secondary",
+                "text-text-primary text-uk-xs",
+                linkable && "hover:text-brand-primary",
+              )}
+              style={{
+                textShadow:
+                  "0 1px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.05)",
+              }}
+              onClick={!linkable ? (e: React.MouseEvent) => e.preventDefault() : undefined}
+            >
+              {versionText}
+            </a>
+          )}
+        </div>
+      )}
+      {gitHash && gitHash !== "unknown" && (
+        <a
+          href={linkable ? `https://github.com/vuer-ai/vuer-uikit/commit/${gitHash}` : undefined}
+          className="px-md rounded-uk-ssx font-number-input text-text-tertiary text-uk-xs ml-[0px] bg-transparent py-[0px]"
+          onClick={!linkable ? (e: React.MouseEvent) => e.preventDefault() : undefined}
+        >
+          <GitBranch className="mr-[2px] inline-block size-2" />
+          {gitHash}
+        </a>
+      )}
+    </div>
+  );
+}
+
+interface UIKitBadgeProps {
+  /**
+   * Additional CSS classes to apply to the badge
+   */
+  className?: string;
+  /**
+   * Whether to show the package name
+   */
+  package?: boolean;
+  /**
+   * Whether to show just the version or include "v" prefix
+   */
+  prefix?: boolean;
+  /**
+   * Whether the badge should be clickable (links to npm/github)
+   */
+  linkable?: boolean;
+  /**
+   * Whether to show the version
+   */
+  version?: boolean;
+  /**
+   * Whether to show the git hash
+   */
+  hash?: boolean;
+}
+
+/**
+ * High-level badge component that displays the current package version with boolean flags
+ * Format: [ vuer | v0.0.72 ] hash
+ */
+function UIKitBadge({
+  className,
+  package: showPackage = false,
+  prefix = false,
+  linkable = false,
+  version = false,
+  hash = false,
+}: UIKitBadgeProps) {
+  const packageShortName = PACKAGE_NAME.split("/").pop() || PACKAGE_NAME;
+
+  const versionText = version ? (prefix ? `v${PACKAGE_VERSION}` : PACKAGE_VERSION) : undefined;
+
+  return (
+    <PackageBadge
+      className={className}
+      packageName={showPackage ? packageShortName : undefined}
+      packageFullName={PACKAGE_NAME}
+      versionText={versionText}
+      linkable={linkable}
+      gitHash={hash ? GIT_HASH : undefined}
+    />
+  );
+}
+
+// Export version and git hash for external use
+export { PACKAGE_VERSION, GIT_HASH, PackageBadge, UIKitBadge };
+export type { PackageBadgeProps, UIKitBadgeProps };

package/src/ui/avatar.tsx

@@ -0,0 +1,221 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import React, { ComponentProps } from "react";
+
+import { cn, createClientOnlyComponent } from "../hooks";
+
+/**
+ * Avatar root component that displays a user's profile image with fallback support.
+ * Based on Radix UI Avatar primitive with default styling for a circular avatar.
+ *
+ * @param className - Additional CSS classes to apply
+ * @param props - All standard Radix Avatar.Root props are supported
+ */
+export const AvatarRoot = ({
+  className,
+  ...props
+}: ComponentProps<typeof AvatarPrimitive.Root>) => (
+  <AvatarPrimitive.Root
+    data-slot="avatar"
+    className={cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+);
+
+/**
+ * SSR fallback component for Avatar when client-side rendering is not available.
+ * @param className - Additional CSS classes to apply
+ */
+export const AvatarSSRFallback = ({ className }: { className?: string }) => (
+  <span
+    data-slot="avatar"
+    className={cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className)}
+  />
+);
+
+/**
+ * Main Avatar component with client-side rendering support and SSR fallback.
+ * Use this as the container for AvatarImage and AvatarFallback components.
+ *
+ * @example
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage src="/avatar.jpg" alt="User" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+export const Avatar = createClientOnlyComponent(AvatarRoot, AvatarSSRFallback);
+
+/**
+ * Avatar image component for displaying the actual user image.
+ * If the image fails to load, it will automatically fall back to AvatarFallback.
+ *
+ * @param src - Image source URL
+ * @param alt - Alternative text for the image
+ * @param className - Additional CSS classes to apply
+ * @param props - All standard img element props are supported
+ */
+export const AvatarImageRoot = ({
+  className,
+  ...props
+}: ComponentProps<typeof AvatarPrimitive.Image>) => (
+  <AvatarPrimitive.Image
+    data-slot="avatar-image"
+    className={cn("aspect-square size-full", className)}
+    {...props}
+  />
+);
+
+/**
+ * SSR fallback component for AvatarImage when client-side rendering is not available.
+ * @param className - Additional CSS classes to apply
+ */
+export const AvatarImageFallback = ({ className }: { className?: string }) => (
+  <span data-slot="avatar-image" className={cn("aspect-square size-full", className)} />
+);
+
+/**
+ * Avatar image component with client-side rendering support and SSR fallback.
+ * Displays the user's profile image with automatic fallback support.
+ *
+ * @example
+ * ```tsx
+ * <AvatarImage src="/user-avatar.jpg" alt="John Doe" />
+ * ```
+ */
+export const AvatarImage = createClientOnlyComponent(AvatarImageRoot, AvatarImageFallback);
+
+/**
+ * Avatar fallback component that displays when the image fails to load.
+ * Typically contains user initials or a default icon.
+ *
+ * @param className - Additional CSS classes to apply
+ * @param children - Content to display (usually initials)
+ * @param props - All standard Radix Avatar.Fallback props are supported
+ */
+export const AvatarFallbackRoot = ({
+  className,
+  ...props
+}: ComponentProps<typeof AvatarPrimitive.Fallback>) => (
+  <AvatarPrimitive.Fallback
+    data-slot="avatar-fallback"
+    className={cn(
+      "bg-bg-tertiary flex size-full items-center justify-center rounded-full",
+      className,
+    )}
+    {...props}
+  />
+);
+
+/**
+ * SSR fallback component for AvatarFallback when client-side rendering is not available.
+ * @param className - Additional CSS classes to apply
+ * @param children - Content to display (usually initials)
+ */
+export const AvatarFallbackSSR = ({
+  className,
+  ...props
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}) => (
+  <span
+    data-slot="avatar-fallback"
+    className={cn(
+      "bg-bg-tertiary flex size-full items-center justify-center rounded-full",
+      className,
+    )}
+    {...props}
+  />
+);
+
+/**
+ * Avatar fallback component with client-side rendering support and SSR fallback.
+ * Displays fallback content when the avatar image fails to load.
+ *
+ * @example
+ * ```tsx
+ * <AvatarFallback>JD</AvatarFallback>
+ * ```
+ */
+export const AvatarFallback = createClientOnlyComponent(AvatarFallbackRoot, AvatarFallbackSSR);
+
+/**
+ * Props for the AvatarGroup component.
+ */
+export interface AvatarGroupProps {
+  /** Avatar components to display in the group */
+  children: React.ReactNode;
+  /** Additional CSS classes to apply */
+  className?: string;
+  /** Spacing between avatars in the group */
+  spacing?: "tight" | "normal" | "loose";
+  /** Maximum number of avatars to show before adding a "+N" indicator */
+  max?: number;
+}
+
+/**
+ * Avatar group component for displaying multiple avatars in a stacked layout.
+ * Supports configurable spacing and a maximum count with overflow indicator.
+ *
+ * @param children - Avatar components to display
+ * @param className - Additional CSS classes to apply
+ * @param spacing - Spacing between avatars ("tight" | "normal" | "loose"), defaults to "normal"
+ * @param max - Maximum number of avatars to show, remaining count will be shown as "+N"
+ *
+ * @example
+ * ```tsx
+ * <AvatarGroup spacing="tight" max={3}>
+ *   <Avatar>
+ *     <AvatarImage src="/user1.jpg" alt="User 1" />
+ *     <AvatarFallback>U1</AvatarFallback>
+ *   </Avatar>
+ *   <Avatar>
+ *     <AvatarImage src="/user2.jpg" alt="User 2" />
+ *     <AvatarFallback>U2</AvatarFallback>
+ *   </Avatar>
+ * </AvatarGroup>
+ * ```
+ */
+export function AvatarGroup({ children, className, spacing = "normal", max }: AvatarGroupProps) {
+  const spacingClasses = {
+    tight: "-space-x-1.5",
+    normal: "-space-x-1",
+    loose: "-space-x-0.45",
+  };
+
+  const childrenArray = React.Children.toArray(children);
+  const displayChildren = max ? childrenArray.slice(0, max) : childrenArray;
+  const remainingCount = max && childrenArray.length > max ? childrenArray.length - max : 0;
+
+  return (
+    <div className={cn("flex flex-row-reverse justify-end", spacingClasses[spacing], className)}>
+      {remainingCount > 0 && (
+        <Avatar
+          className={cn(
+            "ring-background relative cursor-default ring-2 transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120",
+          )}
+        >
+          <AvatarFallback>+{remainingCount}</AvatarFallback>
+        </Avatar>
+      )}
+      {displayChildren.reverse().map((child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(
+            child as React.ReactElement<{
+              className?: string;
+              style?: React.CSSProperties;
+            }>,
+            {
+              className: cn(
+                `ring-background relative ring-2 transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120`,
+                (child.props as { className?: string })?.className,
+              ),
+            },
+          );
+        }
+        return child;
+      })}
+    </div>
+  );
+}

package/src/ui/badge.tsx

@@ -0,0 +1,74 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+const badgeVariants = cva(
+  [
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "rounded-uk-xs",
+    "px-md",
+    "py-xxs",
+    "align-middle",
+    "text-uk-sm",
+    "leading-uk-sm",
+    "w-fit",
+    "whitespace-nowrap",
+    "shrink-0",
+    "[&>svg]:size-3",
+    "[&>svg]:pointer-events-none",
+    "transition-[color,box-shadow]",
+    "overflow-hidden",
+    "text-text-withbg",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-brand-primary",
+        secondary: "bg-bg-secondary text-text-primary",
+        destructive: "bg-danger-primary",
+        success: "bg-accent-success",
+        warning: "bg-accent-warning",
+      },
+      type: {
+        default: "",
+        circle: "size-[18px] !rounded-full",
+        dot: "size-[6px] rounded-full !px-0 !py-0 text-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      type: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  type,
+  asChild = false,
+  ...props
+}: ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  /**
+   * Inline status badge.
+   *
+   * @param variant - Visual variant (default | secondary | destructive | success | warning | accent)
+   * @param type - Shape type (default | circle | dot)
+   * @param asChild - Render child element instead of span when true
+   */
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant, type }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };