@elizaos/ui 2.0.0-alpha.73 → 2.0.0-alpha.76

package/index.d.ts

@@ -0,0 +1,42 @@
+export * from "./components/ui/badge";
+export * from "./components/ui/banner";
+export * from "./components/ui/button";
+export * from "./components/ui/card";
+export * from "./components/ui/chat-atoms";
+export * from "./components/ui/checkbox";
+export * from "./components/ui/confirm-delete";
+export * from "./components/ui/confirm-dialog";
+export * from "./components/ui/connection-status";
+export * from "./components/ui/copy-button";
+export * from "./components/ui/dialog";
+export * from "./components/ui/dropdown-menu";
+export * from "./components/ui/empty-state";
+export * from "./components/ui/error-boundary";
+export * from "./components/ui/grid";
+export * from "./components/ui/input";
+export * from "./components/ui/label";
+export * from "./components/ui/popover";
+export * from "./components/ui/save-footer";
+export * from "./components/ui/search-bar";
+export * from "./components/ui/search-input";
+export * from "./components/ui/section-card";
+export * from "./components/ui/select";
+export * from "./components/ui/separator";
+export * from "./components/ui/skeleton";
+export * from "./components/ui/slider";
+export * from "./components/ui/sonner";
+export * from "./components/ui/spinner";
+export * from "./components/ui/stack";
+export * from "./components/ui/status-badge";
+export * from "./components/ui/switch";
+export * from "./components/ui/tabs";
+export * from "./components/ui/tag-editor";
+export * from "./components/ui/tag-input";
+export * from "./components/ui/textarea";
+export * from "./components/ui/themed-select";
+export * from "./components/ui/tooltip";
+export * from "./components/ui/tooltip-extended";
+export * from "./components/ui/typography";
+export * from "./lib/button-styles";
+export * from "./lib/utils";
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC"}

package/{src/index.ts → index.js}

@@ -1,6 +1,5 @@
 export * from "./components/ui/badge";
 export * from "./components/ui/banner";
-
 // Atoms
 export * from "./components/ui/button";
 // Molecules

package/lib/button-styles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared button class strings for consistent styling across views.
+ *
+ * These CSS class strings complement the `Button` component for cases where
+ * a plain HTML `button` element is used or Tailwind class composition is
+ * preferred over the variant prop.
+ */
+export declare const btnPrimary = "px-4 py-2 text-sm font-medium bg-[var(--accent)] text-[var(--accent-foreground,#1a1f26)] border border-[var(--accent)] cursor-pointer hover:opacity-90 transition-opacity disabled:opacity-40 disabled:cursor-default rounded-lg";
+export declare const btnGhost = "px-3 py-1.5 text-xs bg-transparent text-[var(--muted)] border border-[var(--border)] cursor-pointer hover:text-[var(--txt)] hover:border-[var(--txt)] transition-colors disabled:opacity-40 disabled:cursor-default rounded-lg";
+export declare const btnDanger = "px-3 py-1.5 text-xs bg-transparent text-[var(--danger,#e74c3c)] border border-[var(--danger,#e74c3c)] cursor-pointer hover:bg-[var(--danger,#e74c3c)] hover:text-white transition-colors disabled:opacity-40 disabled:cursor-default rounded-lg";
+export declare const inputCls = "flex-1 px-3 py-2 text-sm bg-[var(--card)] border border-[var(--border)] text-[var(--txt)] focus:border-[var(--accent)] focus:outline-none transition-colors rounded-lg";
+//# sourceMappingURL=button-styles.d.ts.map

package/lib/button-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../../src/lib/button-styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,UAAU,qOAC6M,CAAC;AAErO,eAAO,MAAM,QAAQ,mOAC6M,CAAC;AAEnO,eAAO,MAAM,SAAS,oPAC6N,CAAC;AAEpP,eAAO,MAAM,QAAQ,2KACqJ,CAAC"}

package/lib/button-styles.js

@@ -0,0 +1,11 @@
+/**
+ * Shared button class strings for consistent styling across views.
+ *
+ * These CSS class strings complement the `Button` component for cases where
+ * a plain HTML `button` element is used or Tailwind class composition is
+ * preferred over the variant prop.
+ */
+export const btnPrimary = "px-4 py-2 text-sm font-medium bg-[var(--accent)] text-[var(--accent-foreground,#1a1f26)] border border-[var(--accent)] cursor-pointer hover:opacity-90 transition-opacity disabled:opacity-40 disabled:cursor-default rounded-lg";
+export const btnGhost = "px-3 py-1.5 text-xs bg-transparent text-[var(--muted)] border border-[var(--border)] cursor-pointer hover:text-[var(--txt)] hover:border-[var(--txt)] transition-colors disabled:opacity-40 disabled:cursor-default rounded-lg";
+export const btnDanger = "px-3 py-1.5 text-xs bg-transparent text-[var(--danger,#e74c3c)] border border-[var(--danger,#e74c3c)] cursor-pointer hover:bg-[var(--danger,#e74c3c)] hover:text-white transition-colors disabled:opacity-40 disabled:cursor-default rounded-lg";
+export const inputCls = "flex-1 px-3 py-2 text-sm bg-[var(--card)] border border-[var(--border)] text-[var(--txt)] focus:border-[var(--accent)] focus:outline-none transition-colors rounded-lg";

package/lib/utils.d.ts

@@ -0,0 +1,6 @@
+import { type ClassValue } from "clsx";
+/**
+ * Utility function to merge tailwind classes with conditional class names.
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAG7C;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/{src/lib/utils.ts → lib/utils.js}

@@ -1,9 +1,8 @@
-import { type ClassValue, clsx } from "clsx";
+import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-
 /**
  * Utility function to merge tailwind classes with conditional class names.
  */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@elizaos/ui",
-  "version": "2.0.0-alpha.73",
+  "version": "2.0.0-alpha.76",
   "description": "Reusable UI primitives and components for Milady applications.",
   "type": "module",
-  "main": "src/index.ts",
+  "main": "./index.js",
   "license": "MIT",
   "homepage": "https://github.com/milady-ai/milady",
   "repository": {
@@ -17,14 +17,18 @@
     "react",
     "components"
   ],
-  "scripts": {
-    "clean": "rimraf dist",
-    "build:dist": "rimraf dist && tsc -p tsconfig.build.json && node ../../scripts/copy-package-assets.mjs packages/ui src/styles && node ../../scripts/prepare-package-dist.mjs packages/ui",
-    "pack:dry-run": "cd dist && npm pack --dry-run"
-  },
   "exports": {
-    ".": "./src/index.ts",
-    "./utils": "./src/lib/utils.ts"
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./utils": {
+      "types": "./lib/utils.d.ts",
+      "import": "./lib/utils.js",
+      "default": "./lib/utils.js"
+    },
+    "./package.json": "./package.json"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -51,14 +55,8 @@
     "tailwind-merge": "^2.6.0"
   },
   "publishConfig": {
-    "access": "public"
-  },
-  "devDependencies": {
-    "@tailwindcss/vite": "^4.2.1",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "tailwindcss": "^4.1.18",
-    "typescript": "^5.9.3"
+    "access": "public",
+    "directory": "dist"
   },
-  "gitHead": "036d15051d6c06cca03eb0f4e3c65a18801d8360"
+  "types": "./index.d.ts"
 }

package/README.md

@@ -1,6 +0,0 @@
-# @elizaos/ui
-
-Reusable React UI primitives for ElizaOS applications.
-
-This package contains shared buttons, inputs, dialogs, badges, layout helpers,
-and related component utilities used by app shells built on top of ElizaOS.

package/src/components/ui/badge.tsx

@@ -1,35 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-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-fg hover:bg-primary/80",
-        secondary: "border-transparent bg-bg-accent text-txt hover:bg-bg-hover",
-        destructive:
-          "border-transparent bg-destructive text-destructive-fg hover:bg-destructive/80",
-        outline: "text-txt border-border",
-      },
-    },
-    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/components/ui/banner.tsx

@@ -1,81 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { AlertTriangle, Info, X, XCircle } from "lucide-react";
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-const bannerVariants = cva(
-  "flex items-center gap-3 border px-4 py-2.5 text-xs",
-  {
-    variants: {
-      variant: {
-        error: "border-destructive/30 bg-destructive/10 text-destructive",
-        warning: "border-warn/30 bg-warn/10 text-warn",
-        info: "border-accent/30 bg-accent/10 text-accent",
-      },
-    },
-    defaultVariants: {
-      variant: "info",
-    },
-  },
-);
-
-const ICONS: Record<string, React.ElementType> = {
-  error: XCircle,
-  warning: AlertTriangle,
-  info: Info,
-};
-
-export interface BannerProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof bannerVariants> {
-  /** Optional action element (button, link) */
-  action?: React.ReactNode;
-  /** Show dismiss button */
-  dismissible?: boolean;
-  /** Called when dismiss is clicked */
-  onDismiss?: () => void;
-  /** Aria-label for dismiss button */
-  dismissLabel?: string;
-}
-
-export const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
-  (
-    {
-      variant = "info",
-      action,
-      dismissible,
-      onDismiss,
-      dismissLabel = "Dismiss",
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const Icon = ICONS[variant ?? "info"];
-
-    return (
-      <div
-        ref={ref}
-        className={cn(bannerVariants({ variant }), className)}
-        role="alert"
-        {...props}
-      >
-        <Icon className="h-4 w-4 shrink-0" />
-        <span className="flex-1">{children}</span>
-        {action}
-        {dismissible && (
-          <button
-            type="button"
-            onClick={onDismiss}
-            className="rounded-sm p-0.5 opacity-70 hover:opacity-100 transition-opacity"
-            aria-label={dismissLabel}
-          >
-            <X className="h-3.5 w-3.5" />
-          </button>
-        )}
-      </div>
-    );
-  },
-);
-Banner.displayName = "Banner";

package/src/components/ui/button.tsx

@@ -1,56 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-bg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-[var(--primary-foreground,#1a1f26)] hover:bg-primary/90 hover:text-[var(--primary-foreground,#1a1f26)]",
-        destructive:
-          "bg-destructive text-destructive-fg hover:bg-destructive/90",
-        outline:
-          "border border-input bg-bg hover:bg-bg-accent hover:text-accent-fg",
-        secondary: "bg-secondary text-secondary-fg hover:bg-secondary/80",
-        ghost: "hover:bg-bg-accent hover:text-accent-fg",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3 py-1.5",
-        lg: "h-11 rounded-md px-8 py-2.5",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

package/src/components/ui/card.tsx

@@ -1,79 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-xl border border-border bg-card text-card-fg shadow-sm",
-      className,
-    )}
-    {...props}
-  />
-));
-Card.displayName = "Card";
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-));
-CardHeader.displayName = "CardHeader";
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-CardTitle.displayName = "CardTitle";
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("text-sm text-muted", className)} {...props} />
-));
-CardDescription.displayName = "CardDescription";
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-));
-CardContent.displayName = "CardContent";
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-));
-CardFooter.displayName = "CardFooter";
-
-export {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-};

package/src/components/ui/chat-atoms.tsx

@@ -1,129 +0,0 @@
-/**
- * Chat sub-components that have no app-level context dependency.
- *
- * These complement the full `ChatMessage` component (which stays in
- * `apps/app` because it uses `useApp()` for i18n and the `MessageContent`
- * renderer). Extracted here so they can be reused by any app.
- */
-
-import { Button } from "./button";
-
-/* ── TypingIndicator ─────────────────────────────────────────────────── */
-
-export function TypingIndicator({
-  agentName,
-  agentAvatarSrc,
-}: {
-  agentName: string;
-  agentAvatarSrc?: string | null;
-}) {
-  const agentInitial = agentName.trim().charAt(0).toUpperCase() || "A";
-
-  return (
-    <div className="flex items-start gap-2 sm:gap-3 mt-4">
-      <div className="w-8 h-8 shrink-0 rounded-full overflow-hidden border border-border bg-bg-hover shadow-sm">
-        {agentAvatarSrc ? (
-          <img
-            src={agentAvatarSrc}
-            alt={`${agentName} avatar`}
-            className="w-full h-full object-cover"
-          />
-        ) : (
-          <div className="w-full h-full flex items-center justify-center text-[11px] font-bold text-accent bg-accent-subtle">
-            {agentInitial}
-          </div>
-        )}
-      </div>
-
-      <div className="max-w-[88%] sm:max-w-[80%] min-w-0">
-        <div className="text-[12px] font-semibold text-accent mb-1">
-          {agentName}
-        </div>
-        <div className="px-4 py-3 bg-bg-accent border border-border rounded-2xl rounded-bl-md">
-          <div className="flex gap-1">
-            <span
-              className="w-2 h-2 rounded-full bg-muted-strong animate-[typing-bounce_1.2s_ease-in-out_infinite]"
-              style={{ animationDelay: "0ms" }}
-            />
-            <span
-              className="w-2 h-2 rounded-full bg-muted-strong animate-[typing-bounce_1.2s_ease-in-out_infinite]"
-              style={{ animationDelay: "200ms" }}
-            />
-            <span
-              className="w-2 h-2 rounded-full bg-muted-strong animate-[typing-bounce_1.2s_ease-in-out_infinite]"
-              style={{ animationDelay: "400ms" }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ── ChatEmptyState ──────────────────────────────────────────────────── */
-
-export interface ChatEmptyStateProps {
-  agentName: string;
-  /** Starter suggestions shown as quick-reply chips. */
-  suggestions?: string[];
-  onSuggestionClick?: (suggestion: string) => void;
-  /** i18n labels — all have sensible English defaults. */
-  labels?: {
-    startConversation?: string;
-    sendMessageTo?: string;
-    toBeginChatting?: string;
-    chatIconLabel?: string;
-  };
-}
-
-export function ChatEmptyState({
-  agentName,
-  suggestions = ["Hello!", "How are you?", "Tell me a joke", "Help me with..."],
-  onSuggestionClick,
-  labels = {},
-}: ChatEmptyStateProps) {
-  return (
-    <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
-      <div className="w-16 h-16 rounded-2xl bg-accent-subtle flex items-center justify-center mb-4">
-        <svg
-          width="32"
-          height="32"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="text-accent"
-          aria-label={labels.chatIconLabel ?? "Chat icon"}
-        >
-          <title>{labels.chatIconLabel ?? "Chat"}</title>
-          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-        </svg>
-      </div>
-      <h3 className="text-lg font-semibold text-txt-strong mb-2">
-        {labels.startConversation ?? "Start a Conversation"}
-      </h3>
-      <p
-        className="text-sm text-muted max-w-sm mb-6"
-        style={{ fontFamily: "var(--font-chat)" }}
-      >
-        {labels.sendMessageTo ?? "Send a message to"} {agentName}{" "}
-        {labels.toBeginChatting ?? "to begin chatting."}
-      </p>
-      <div className="flex flex-wrap justify-center gap-2">
-        {suggestions.map((suggestion) => (
-          <Button
-            key={suggestion}
-            variant="outline"
-            size="sm"
-            className="px-3 py-1.5 h-7 text-xs rounded-full text-muted border-border bg-bg hover:border-accent hover:text-accent transition-colors"
-            onClick={() => onSuggestionClick?.(suggestion)}
-          >
-            {suggestion}
-          </Button>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/components/ui/checkbox.tsx

@@ -1,28 +0,0 @@
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-fg",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };

package/src/components/ui/confirm-delete.tsx

@@ -1,67 +0,0 @@
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-export interface ConfirmDeleteProps {
-  onConfirm: () => void;
-  disabled?: boolean;
-  triggerLabel?: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  busyLabel?: string;
-  promptText?: string;
-  className?: string;
-}
-
-export function ConfirmDelete({
-  onConfirm,
-  disabled = false,
-  triggerLabel = "Delete",
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  busyLabel,
-  promptText = "Delete?",
-  className,
-}: ConfirmDeleteProps) {
-  const [confirming, setConfirming] = React.useState(false);
-
-  if (!confirming) {
-    return (
-      <button
-        type="button"
-        className={cn(
-          "rounded-md border border-border px-2 py-1 text-xs text-muted transition-colors hover:border-destructive hover:text-destructive",
-          className,
-        )}
-        onClick={() => setConfirming(true)}
-        disabled={disabled}
-      >
-        {triggerLabel}
-      </button>
-    );
-  }
-
-  return (
-    <span className={cn("inline-flex items-center gap-1.5", className)}>
-      <span className="text-[11px] text-destructive">{promptText}</span>
-      <button
-        type="button"
-        className="rounded-md border border-destructive bg-destructive px-2 py-0.5 text-[10px] font-medium text-destructive-fg transition-opacity hover:opacity-90 disabled:opacity-50"
-        onClick={() => {
-          onConfirm();
-          setConfirming(false);
-        }}
-        disabled={disabled}
-      >
-        {disabled && busyLabel ? busyLabel : confirmLabel}
-      </button>
-      <button
-        type="button"
-        className="rounded-md border border-border px-2 py-0.5 text-[10px] text-muted transition-colors hover:border-accent hover:text-accent disabled:opacity-50"
-        onClick={() => setConfirming(false)}
-        disabled={disabled}
-      >
-        {cancelLabel}
-      </button>
-    </span>
-  );
-}