@agent-native/toolkit 0.6.0 → 0.7.0

package/src/onboarding/index.ts

@@ -0,0 +1 @@
+export {};

package/src/provider.tsx

@@ -0,0 +1,47 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  type ReactNode,
+  type ComponentType,
+} from "react";
+
+import type { ButtonProps } from "./ui/button.js";
+
+export interface ToolkitComponents {
+  Button?: ComponentType<ButtonProps>;
+}
+
+interface ToolkitProviderProps {
+  children: ReactNode;
+  components?: ToolkitComponents;
+}
+
+const ToolkitComponentsContext = createContext<ToolkitComponents>({});
+
+export function ToolkitProvider({
+  children,
+  components,
+}: ToolkitProviderProps) {
+  const parent = useContext(ToolkitComponentsContext);
+  const value = useMemo(
+    () => ({ ...parent, ...components }),
+    [parent, components],
+  );
+
+  return (
+    <ToolkitComponentsContext.Provider value={value}>
+      {children}
+    </ToolkitComponentsContext.Provider>
+  );
+}
+
+export function useToolkitComponents(): ToolkitComponents {
+  return useContext(ToolkitComponentsContext);
+}
+
+export function useToolkitComponent<Name extends keyof ToolkitComponents>(
+  name: Name,
+): ToolkitComponents[Name] {
+  return useToolkitComponents()[name];
+}

package/src/sharing/VisibilityBadge.spec.ts

@@ -0,0 +1,96 @@
+import { IconLock, IconUsersGroup, IconWorld } from "@tabler/icons-react";
+import type { ReactElement } from "react";
+import { describe, expect, it } from "vitest";
+
+import { VisibilityBadge } from "./VisibilityBadge.js";
+
+/**
+ * VisibilityBadge is a plain function component with no hooks or DOM access,
+ * so we can call it directly (no render, no jsdom) and inspect the React
+ * element object the JSX runtime builds. This locks down the visibility ->
+ * icon/label mapping and the derived-size math without needing a DOM
+ * environment.
+ */
+
+interface SpanStyle {
+  display: string;
+  alignItems: string;
+  gap: number;
+  fontSize: number;
+  color: string;
+}
+
+interface SpanElement extends ReactElement {
+  type: "span";
+  props: {
+    className?: string;
+    style: SpanStyle;
+    children: [ReactElement<{ size: number }>, string];
+  };
+}
+
+function renderBadge(...args: Parameters<typeof VisibilityBadge>): SpanElement {
+  return VisibilityBadge(...args) as unknown as SpanElement;
+}
+
+describe("VisibilityBadge", () => {
+  it("renders the public icon and label", () => {
+    const el = renderBadge({ visibility: "public" });
+    expect(el.type).toBe("span");
+    const [icon, label] = el.props.children;
+    expect(icon.type).toBe(IconWorld);
+    expect(label).toBe("Public");
+  });
+
+  it("renders the org icon and label", () => {
+    const el = renderBadge({ visibility: "org" });
+    const [icon, label] = el.props.children;
+    expect(icon.type).toBe(IconUsersGroup);
+    expect(label).toBe("Org");
+  });
+
+  it("renders the private icon and label", () => {
+    const el = renderBadge({ visibility: "private" });
+    const [icon, label] = el.props.children;
+    expect(icon.type).toBe(IconLock);
+    expect(label).toBe("Private");
+  });
+
+  it("falls back to private when visibility is null", () => {
+    const el = renderBadge({ visibility: null });
+    const [icon, label] = el.props.children;
+    expect(icon.type).toBe(IconLock);
+    expect(label).toBe("Private");
+  });
+
+  it("falls back to private when visibility is undefined", () => {
+    const el = renderBadge({ visibility: undefined });
+    const [icon, label] = el.props.children;
+    expect(icon.type).toBe(IconLock);
+    expect(label).toBe("Private");
+  });
+
+  it("applies a custom size to both the span font size and the icon size", () => {
+    const el = renderBadge({ visibility: "public", size: 20 });
+    expect(el.props.style.fontSize).toBe(20);
+    const [icon] = el.props.children;
+    expect(icon.props.size).toBe(22);
+  });
+
+  it("defaults size to 12 for the span and 14 for the icon when omitted", () => {
+    const el = renderBadge({ visibility: "public" });
+    expect(el.props.style.fontSize).toBe(12);
+    const [icon] = el.props.children;
+    expect(icon.props.size).toBe(14);
+  });
+
+  it("passes className through to the span", () => {
+    const el = renderBadge({ visibility: "public", className: "my-badge" });
+    expect(el.props.className).toBe("my-badge");
+  });
+
+  it("always uses the muted-foreground color token", () => {
+    const el = renderBadge({ visibility: "org" });
+    expect(el.props.style.color).toBe("hsl(var(--muted-foreground))");
+  });
+});

package/src/sharing/VisibilityBadge.tsx

@@ -0,0 +1,37 @@
+import { IconLock, IconUsersGroup, IconWorld } from "@tabler/icons-react";
+
+export interface VisibilityBadgeProps {
+  visibility: "private" | "org" | "public" | null | undefined;
+  size?: number;
+  className?: string;
+}
+
+/**
+ * Tiny visibility chip for list views. Renders a small icon + label so users
+ * can spot shared/public resources at a glance.
+ */
+export function VisibilityBadge({
+  visibility,
+  size = 12,
+  className,
+}: VisibilityBadgeProps) {
+  const v = visibility ?? "private";
+  const Icon =
+    v === "public" ? IconWorld : v === "org" ? IconUsersGroup : IconLock;
+  const label = v === "public" ? "Public" : v === "org" ? "Org" : "Private";
+  return (
+    <span
+      className={className}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        fontSize: size,
+        color: "hsl(var(--muted-foreground))",
+      }}
+    >
+      <Icon size={size + 2} />
+      {label}
+    </span>
+  );
+}

package/src/sharing/index.ts

@@ -0,0 +1,4 @@
+export {
+  VisibilityBadge,
+  type VisibilityBadgeProps,
+} from "./VisibilityBadge.js";

package/src/styles.css

@@ -0,0 +1,21 @@
+/*
+ * Registers @agent-native/toolkit components with Tailwind so apps that render
+ * toolkit UI (dropdowns, dialogs, popovers, etc.) generate the classes those
+ * components use. Without this, classes that appear ONLY inside toolkit
+ * components (e.g. the dropdown content's `z-[250]` and enter/exit animations)
+ * are never generated, and menus/overlays stack under raised app surfaces.
+ *
+ * Import in an app's `app/global.css` AFTER `@import "tailwindcss";`, alongside
+ * the core stylesheet:
+ *
+ *   @import "tailwindcss";
+ *   @import "@agent-native/core/styles/agent-native.css";
+ *   @import "@agent-native/toolkit/styles.css";
+ *
+ * Paths are self-relative to this file:
+ *   - Monorepo / Vite workspace alias: this file is served from `src/`, so scan
+ *     sibling TypeScript sources (dist/ is gitignored and skipped by Tailwind).
+ *   - Published package: this file ships at `dist/styles.css`, so also scan
+ *     compiled `.js` next to it for consumers that only install `dist/`.
+ */
+@source "./**/*.{js,ts,tsx}";

package/src/ui/accordion.tsx

@@ -0,0 +1,56 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { IconChevronDown } from "@tabler/icons-react";
+import * as React from "react";
+
+import { cn } from "../utils.js";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <IconChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/ui/alert-dialog.tsx

@@ -0,0 +1,141 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+
+import { cn } from "../utils.js";
+import { buttonVariants } from "./button.js";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, style, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-[340] bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    style={{ zIndex: 340, ...style }}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, style, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-1/2 top-1/2 z-[350] grid w-11/12 max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
+        className,
+      )}
+      style={{ zIndex: 350, ...style }}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-start",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/ui/alert.tsx

@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../utils.js";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:ps-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

package/src/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

package/src/ui/avatar.tsx

@@ -0,0 +1,48 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+import { cn } from "../utils.js";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/ui/badge.tsx

@@ -0,0 +1,37 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../utils.js";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/ui/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import { Slot } from "@radix-ui/react-slot";
+import { IconChevronRight, IconDots } from "@tabler/icons-react";
+import * as React from "react";
+
+import { cn } from "../utils.js";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className,
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <IconChevronRight className="rtl:-scale-x-100" />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <IconDots className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};