gladvn 0.2.14

package/src/components/micro/avatar.tsx

@@ -0,0 +1,143 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (20 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+"use client";
+
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import * as React from "react";
+
+import { type Size } from "../../lib/types";
+import { cn } from "../../lib/utils";
+
+/**
+ * @description An image element with a fallback for representing the user.
+ * @requires AvatarImage, AvatarFallback
+ * @example
+ * <Avatar>
+ *   <AvatarImage src="https://github.com/shadcn.png" />
+ *   <AvatarFallback>CN</AvatarFallback>
+ * </Avatar>
+ */
+const Avatar = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Root>,
+  AvatarPrimitive.Root.Props & { size?: Size }
+>(({ className, size = "md", ...props }, ref) => {
+  return (
+    <AvatarPrimitive.Root
+      ref={ref}
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        "group-data-[slot=avatar-group]/avatar-group:ring-2 group-data-[slot=avatar-group]/avatar-group:ring-background",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+Avatar.displayName = "Avatar";
+
+const AvatarImage = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Image>,
+  AvatarPrimitive.Image.Props
+>(({ className, ...props }, ref) => {
+  return (
+    <AvatarPrimitive.Image
+      ref={ref}
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+AvatarImage.displayName = "AvatarImage";
+
+const AvatarFallback = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
+  AvatarPrimitive.Fallback.Props
+>(({ className, ...props }, ref) => {
+  return (
+    <AvatarPrimitive.Fallback
+      ref={ref}
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs group-data-[size=lg]/avatar:text-base",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+AvatarFallback.displayName = "AvatarFallback";
+
+const AvatarBadge = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentProps<"span">
+>(({ className, ...props }, ref) => {
+  return (
+    <span
+      ref={ref}
+      data-slot="avatar-badge"
+      className={cn(
+        "rounded-full bg-primary ring-2 ring-background",
+        "group-data-[size=sm]/avatar:size-2",
+        "group-data-[size=md]/avatar:size-2.5",
+        "group-data-[size=lg]/avatar:size-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+AvatarBadge.displayName = "AvatarBadge";
+
+const AvatarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="avatar-group"
+      className={cn("group/avatar-group flex -space-x-2", className)}
+      {...props}
+    />
+  );
+});
+AvatarGroup.displayName = "AvatarGroup";
+
+const AvatarGroupCount = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { size?: Size }
+>(({ className, size = "md", ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="avatar-group-count"
+      data-size={size}
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+AvatarGroupCount.displayName = "AvatarGroupCount";
+
+export {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+};

package/src/components/micro/badge.tsx

@@ -0,0 +1,207 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (20 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+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 { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-6 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2.5 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+  {
+    variants: {
+      variant: {
+        solid: "border-transparent",
+        outline: "bg-transparent",
+        soft: "border-transparent",
+      },
+      color: {
+        primary: "",
+        secondary: "",
+        destructive: "",
+        warning: "",
+        success: "",
+        info: "",
+        tertiary: "",
+        muted: "",
+        accent: "",
+      },
+    },
+    compoundVariants: [
+      // Solid
+      {
+        variant: "solid",
+        color: "primary",
+        className: "bg-primary text-primary-foreground",
+      },
+      {
+        variant: "solid",
+        color: "secondary",
+        className: "bg-secondary text-secondary-foreground",
+      },
+      {
+        variant: "solid",
+        color: "destructive",
+        className: "bg-destructive text-destructive-foreground",
+      },
+      {
+        variant: "solid",
+        color: "warning",
+        className: "bg-warning text-warning-foreground",
+      },
+      {
+        variant: "solid",
+        color: "success",
+        className: "bg-success text-success-foreground",
+      },
+      {
+        variant: "solid",
+        color: "info",
+        className: "bg-info text-info-foreground",
+      },
+      {
+        variant: "solid",
+        color: "tertiary",
+        className: "bg-tertiary text-tertiary-foreground",
+      },
+      {
+        variant: "solid",
+        color: "muted",
+        className: "bg-muted text-muted-foreground",
+      },
+      {
+        variant: "solid",
+        color: "accent",
+        className: "bg-accent text-accent-foreground",
+      },
+
+      // Outline
+      {
+        variant: "outline",
+        color: "primary",
+        className: "border-primary text-primary",
+      },
+      {
+        variant: "outline",
+        color: "secondary",
+        className: "border-secondary text-secondary",
+      },
+      {
+        variant: "outline",
+        color: "destructive",
+        className: "border-destructive text-destructive",
+      },
+      {
+        variant: "outline",
+        color: "warning",
+        className: "border-warning text-warning",
+      },
+      {
+        variant: "outline",
+        color: "success",
+        className: "border-success text-success",
+      },
+      { variant: "outline", color: "info", className: "border-info text-info" },
+      {
+        variant: "outline",
+        color: "tertiary",
+        className: "border-tertiary text-tertiary",
+      },
+      {
+        variant: "outline",
+        color: "muted",
+        className: "border-muted text-muted-foreground",
+      },
+      {
+        variant: "outline",
+        color: "accent",
+        className: "border-accent text-accent-foreground",
+      },
+
+      // Soft
+      {
+        variant: "soft",
+        color: "primary",
+        className: "bg-primary/15 text-primary",
+      },
+      {
+        variant: "soft",
+        color: "secondary",
+        className: "bg-secondary/15 text-secondary",
+      },
+      {
+        variant: "soft",
+        color: "destructive",
+        className: "bg-destructive/15 text-destructive",
+      },
+      {
+        variant: "soft",
+        color: "warning",
+        className: "bg-warning/15 text-warning",
+      },
+      {
+        variant: "soft",
+        color: "success",
+        className: "bg-success/15 text-success",
+      },
+      { variant: "soft", color: "info", className: "bg-info/15 text-info" },
+      {
+        variant: "soft",
+        color: "tertiary",
+        className: "bg-tertiary/15 text-tertiary",
+      },
+      {
+        variant: "soft",
+        color: "muted",
+        className: "bg-muted/50 text-muted-foreground",
+      },
+      {
+        variant: "soft",
+        color: "accent",
+        className: "bg-accent/50 text-accent-foreground",
+      },
+    ],
+  },
+);
+
+import * as React from "react";
+
+/**
+ * @description Displays a badge or a component that looks like a badge.
+ * @example
+ * <Badge variant="outline">Badge</Badge>
+ */
+export type BadgeProps = useRender.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants>;
+
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  (
+    { className, variant = "solid", color = "primary", render, ...props },
+    ref,
+  ) => {
+    return useRender({
+      defaultTagName: "span",
+      props: mergeProps<"span">(
+        {
+          ref,
+          className: cn(badgeVariants({ variant, color }), className),
+        },
+        props,
+      ),
+      render,
+      state: {
+        slot: "badge",
+        variant,
+        color,
+      },
+    });
+  },
+);
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants };

package/src/components/micro/breadcrumb.tsx

@@ -0,0 +1,162 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (22 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+
+/**
+ * @description Displays the path to the current resource using a hierarchy of links.
+ * @requires BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage
+ * @example
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><BreadcrumbPage>Current</BreadcrumbPage></BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ */
+const Breadcrumb = React.forwardRef<HTMLElement, React.ComponentProps<"nav">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <nav
+        ref={ref}
+        aria-label="breadcrumb"
+        data-slot="breadcrumb"
+        className={cn(className)}
+        {...props}
+      />
+    );
+  },
+);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentProps<"ol">
+>(({ className, ...props }, ref) => {
+  return (
+    <ol
+      ref={ref}
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => {
+  return (
+    <li
+      ref={ref}
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+export type BreadcrumbLinkProps = useRender.ComponentProps<"a">;
+
+const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+  ({ className, render, ...props }, ref) => {
+    return useRender({
+      defaultTagName: "a",
+      props: mergeProps<"a">(
+        {
+          ref,
+          className: cn("transition-colors hover:text-foreground", className),
+        },
+        props,
+      ),
+      render,
+      state: {
+        slot: "breadcrumb-link",
+      },
+    });
+  },
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentProps<"span">
+>(({ className, ...props }, ref) => {
+  return (
+    <span
+      ref={ref}
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ children, className, ...props }, ref) => {
+  return (
+    <li
+      ref={ref}
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon className="size-3.5" />}
+    </li>
+  );
+});
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentProps<"span">
+>(({ className, ...props }, ref) => {
+  return (
+    <span
+      ref={ref}
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-5 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+});
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};

package/src/components/micro/button.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Button } from "./button";
+
+describe("Button", () => {
+  it("renders correctly with default props", () => {
+    render(<Button>Click me</Button>);
+    const button = screen.getByRole("button", { name: "Click me" });
+    expect(button).toBeInTheDocument();
+    // Default variant is "solid" and color is "primary"
+    expect(button).toHaveAttribute("data-variant", "solid");
+    expect(button).toHaveAttribute("data-color", "primary");
+  });
+
+  it("applies custom variants and colors", () => {
+    render(
+      <Button variant="outline" color="destructive">
+        Delete
+      </Button>,
+    );
+    const button = screen.getByRole("button", { name: "Delete" });
+    expect(button).toHaveAttribute("data-variant", "outline");
+    expect(button).toHaveAttribute("data-color", "destructive");
+  });
+});