@agent-native/toolkit 0.0.0-beta-20260819143124

package/src/sharing/index.ts

@@ -0,0 +1,16 @@
+export {
+  ShareAgentsSection,
+  type ShareAgentsSectionProps,
+  ShareCopyRow,
+  type ShareCopyRowProps,
+  ShareDisclosureSection,
+  type ShareDisclosureSectionProps,
+  SharePeopleSection,
+  type SharePeopleSectionProps,
+  ShareTrigger,
+  type ShareTriggerProps,
+} from "./SharePrimitives.js";
+export {
+  VisibilityBadge,
+  type VisibilityBadgeProps,
+} from "./VisibilityBadge.js";

package/src/styles.css

@@ -0,0 +1,232 @@
+/*
+ * 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}";
+
+@property --agent-realtime-voice-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 0deg;
+}
+
+.agent-realtime-voice-glow {
+  --agent-realtime-voice-angle: 0deg;
+  --agent-realtime-voice-proximity: 72;
+  --agent-realtime-voice-edge-sensitivity: 30;
+  --agent-realtime-voice-color-sensitivity: 50;
+  --agent-realtime-voice-cone-spread: 25;
+  --agent-realtime-voice-fill-opacity: 0.5;
+  --agent-realtime-voice-card-bg: hsl(var(--background));
+  --agent-realtime-voice-glow-color: 40 80% 80%;
+  --agent-realtime-voice-glow-padding: 18px;
+  --agent-realtime-voice-gradient-one: radial-gradient(
+    at 80% 55%,
+    #c084fc 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-two: radial-gradient(
+    at 69% 34%,
+    #f472b6 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-three: radial-gradient(
+    at 8% 6%,
+    #38bdf8 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-four: radial-gradient(
+    at 41% 38%,
+    #c084fc 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-five: radial-gradient(
+    at 86% 85%,
+    #f472b6 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-six: radial-gradient(
+    at 82% 18%,
+    #38bdf8 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-seven: radial-gradient(
+    at 51% 4%,
+    #f472b6 0,
+    transparent 50%
+  );
+  position: absolute;
+  z-index: 0;
+  inset: -1px;
+  border-radius: inherit;
+  isolation: isolate;
+  pointer-events: none;
+  transform: translate3d(0, 0, 0.01px);
+}
+
+.agent-realtime-voice-working {
+  --agent-realtime-voice-proximity: 96;
+}
+
+.agent-realtime-voice-glow::before,
+.agent-realtime-voice-glow::after {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  content: "";
+  transition: opacity 250ms ease-out;
+}
+
+.agent-realtime-voice-glow::before {
+  border: 1px solid transparent;
+  background:
+    linear-gradient(
+        var(--agent-realtime-voice-card-bg),
+        var(--agent-realtime-voice-card-bg)
+      )
+      padding-box,
+    linear-gradient(transparent 0 100%) border-box,
+    var(--agent-realtime-voice-gradient-one) border-box,
+    var(--agent-realtime-voice-gradient-two) border-box,
+    var(--agent-realtime-voice-gradient-three) border-box,
+    var(--agent-realtime-voice-gradient-four) border-box,
+    var(--agent-realtime-voice-gradient-five) border-box,
+    var(--agent-realtime-voice-gradient-six) border-box,
+    var(--agent-realtime-voice-gradient-seven) border-box,
+    linear-gradient(#c084fc 0 100%) border-box;
+  opacity: calc(
+    (
+        var(--agent-realtime-voice-proximity) -
+          var(--agent-realtime-voice-color-sensitivity)
+      ) /
+      (100 - var(--agent-realtime-voice-color-sensitivity))
+  );
+  mask-image: conic-gradient(
+    from var(--agent-realtime-voice-angle) at center,
+    #000 calc(var(--agent-realtime-voice-cone-spread) * 1%),
+    rgb(0 0 0 / 75%) calc((var(--agent-realtime-voice-cone-spread) + 4) * 1%),
+    rgb(0 0 0 / 45%) calc((var(--agent-realtime-voice-cone-spread) + 8) * 1%),
+    rgb(0 0 0 / 18%) calc((var(--agent-realtime-voice-cone-spread) + 12) * 1%),
+    transparent calc((var(--agent-realtime-voice-cone-spread) + 15) * 1%),
+    transparent calc((100 - var(--agent-realtime-voice-cone-spread) - 15) * 1%),
+    rgb(0 0 0 / 18%)
+      calc((100 - var(--agent-realtime-voice-cone-spread) - 12) * 1%),
+    rgb(0 0 0 / 45%)
+      calc((100 - var(--agent-realtime-voice-cone-spread) - 8) * 1%),
+    rgb(0 0 0 / 75%)
+      calc((100 - var(--agent-realtime-voice-cone-spread) - 4) * 1%),
+    #000 calc((100 - var(--agent-realtime-voice-cone-spread)) * 1%)
+  );
+}
+
+.agent-realtime-voice-glow::after {
+  border: 1px solid transparent;
+  background:
+    var(--agent-realtime-voice-gradient-one) padding-box,
+    var(--agent-realtime-voice-gradient-two) padding-box,
+    var(--agent-realtime-voice-gradient-three) padding-box,
+    var(--agent-realtime-voice-gradient-four) padding-box,
+    var(--agent-realtime-voice-gradient-five) padding-box,
+    var(--agent-realtime-voice-gradient-six) padding-box,
+    var(--agent-realtime-voice-gradient-seven) padding-box,
+    linear-gradient(#c084fc 0 100%) padding-box;
+  mask-image:
+    linear-gradient(to bottom, #000, #000),
+    radial-gradient(ellipse at 50% 50%, #000 40%, transparent 65%),
+    radial-gradient(ellipse at 66% 66%, #000 5%, transparent 40%),
+    radial-gradient(ellipse at 33% 33%, #000 5%, transparent 40%),
+    radial-gradient(ellipse at 66% 33%, #000 5%, transparent 40%),
+    radial-gradient(ellipse at 33% 66%, #000 5%, transparent 40%),
+    conic-gradient(
+      from var(--agent-realtime-voice-angle) at center,
+      transparent 5%,
+      #000 15%,
+      #000 85%,
+      transparent 95%
+    );
+  mask-composite: subtract, add, add, add, add, add;
+  opacity: calc(
+    var(--agent-realtime-voice-fill-opacity) *
+      (
+        var(--agent-realtime-voice-proximity) -
+          var(--agent-realtime-voice-color-sensitivity)
+      ) /
+      (100 - var(--agent-realtime-voice-color-sensitivity))
+  );
+  mix-blend-mode: soft-light;
+}
+
+.agent-realtime-voice-edge-light {
+  position: absolute;
+  z-index: 1;
+  inset: calc(var(--agent-realtime-voice-glow-padding) * -1);
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: calc(
+    (
+        var(--agent-realtime-voice-proximity) -
+          var(--agent-realtime-voice-edge-sensitivity)
+      ) /
+      (100 - var(--agent-realtime-voice-edge-sensitivity))
+  );
+  mask-image: conic-gradient(
+    from var(--agent-realtime-voice-angle) at center,
+    #000 2.5%,
+    rgb(0 0 0 / 85%) 4%,
+    rgb(0 0 0 / 55%) 7%,
+    rgb(0 0 0 / 25%) 11%,
+    transparent 15%,
+    transparent 85%,
+    rgb(0 0 0 / 25%) 89%,
+    rgb(0 0 0 / 55%) 93%,
+    rgb(0 0 0 / 85%) 96%,
+    #000 97.5%
+  );
+  mix-blend-mode: plus-lighter;
+  transition: opacity 250ms ease-out;
+}
+
+.agent-realtime-voice-edge-light::before {
+  position: absolute;
+  inset: var(--agent-realtime-voice-glow-padding);
+  border-radius: inherit;
+  content: "";
+  box-shadow:
+    inset 0 0 0 1px hsl(var(--agent-realtime-voice-glow-color) / 100%),
+    inset 0 0 1px hsl(var(--agent-realtime-voice-glow-color) / 60%),
+    inset 0 0 3px hsl(var(--agent-realtime-voice-glow-color) / 50%),
+    inset 0 0 6px hsl(var(--agent-realtime-voice-glow-color) / 40%),
+    inset 0 0 15px hsl(var(--agent-realtime-voice-glow-color) / 30%),
+    inset 0 0 25px 2px hsl(var(--agent-realtime-voice-glow-color) / 20%),
+    inset 0 0 50px 2px hsl(var(--agent-realtime-voice-glow-color) / 10%),
+    0 0 1px hsl(var(--agent-realtime-voice-glow-color) / 60%),
+    0 0 3px hsl(var(--agent-realtime-voice-glow-color) / 50%),
+    0 0 6px hsl(var(--agent-realtime-voice-glow-color) / 40%),
+    0 0 15px hsl(var(--agent-realtime-voice-glow-color) / 30%),
+    0 0 25px 2px hsl(var(--agent-realtime-voice-glow-color) / 20%),
+    0 0 50px 2px hsl(var(--agent-realtime-voice-glow-color) / 10%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-realtime-voice-glow {
+    --agent-realtime-voice-angle: 35deg;
+  }
+}

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 };