hazo_ui 4.3.0 → 4.6.0

package/dist/test-harness/index.js

@@ -1,7 +1,10 @@
-import React, { createContext, useState, useRef, useCallback, useContext } from 'react';
+import * as React4 from 'react';
+import React4__default, { createContext, useState, useRef, useCallback, useContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
 import { optional_import } from 'hazo_core/client';
 
 var __defProp = Object.defineProperty;
@@ -51,7 +54,7 @@ function AppSidebar({
 }) {
   const [collapsed, set_collapsed] = useState(false);
   const [current_path, set_current_path] = useState("/");
-  React.useEffect(() => {
+  React4__default.useEffect(() => {
     function update_path() {
       set_current_path(window.location.pathname);
     }
@@ -254,6 +257,70 @@ function useAutoTest() {
   }
   return ctx;
 }
+var buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background 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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React4.forwardRef(
+  ({ className, variant, size, asChild = false, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        style,
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Card = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", className), ...props })
+);
+Card.displayName = "Card";
+var CardHeader = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
 
 // src/test-harness/scenarios/assertions.ts
 function capture_call_site(stack) {
@@ -919,8 +986,8 @@ function ScenarioRow({
   const { runScenario } = useAutoTest();
   const [expanded, set_expanded] = useState(false);
   const is_running = scenario.status === "running";
-  return /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-gray-50", children: [
+  return /* @__PURE__ */ jsxs(Card, { className: "overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between px-4 py-3 bg-gray-50 space-y-0", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx(
           "button",
@@ -941,19 +1008,17 @@ function ScenarioRow({
         ] })
       ] }),
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          variant: "secondary",
+          size: "sm",
           disabled: is_running,
           onClick: () => runScenario(scenario.id),
-          className: cn(
-            "px-3 py-1 rounded text-xs font-medium transition-colors",
-            is_running ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-blue-600 text-white hover:bg-blue-700 cursor-pointer"
-          ),
           children: is_running ? "Running..." : "Run"
         }
       )
     ] }),
-    expanded && /* @__PURE__ */ jsx("div", { className: "divide-y divide-gray-100", children: scenario.cases.map((c, i) => /* @__PURE__ */ jsx(CaseRow, { c, scenario_id: scenario.id, pkg }, i)) })
+    expanded && /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "divide-y divide-gray-100", children: scenario.cases.map((c, i) => /* @__PURE__ */ jsx(CaseRow, { c, scenario_id: scenario.id, pkg }, i)) }) })
   ] });
 }
 function AutoTestRunner() {
@@ -989,23 +1054,16 @@ function AutoTestRunner() {
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         failed_cases_flat.length > 0 && /* @__PURE__ */ jsx(CopyAllFailuresButton, { failedCases: failed_cases_flat }),
+        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: reset, disabled: any_running, children: "Reset" }),
         /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: reset,
-            disabled: any_running,
-            className: "px-3 py-1.5 rounded text-xs font-medium border border-gray-300 text-gray-600 hover:bg-gray-50 disabled:opacity-50",
-            children: "Reset"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
             onClick: runAll,
             disabled: any_running,
+            size: "sm",
             className: cn(
-              "px-4 py-1.5 rounded text-xs font-medium transition-colors",
-              any_running ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-green-600 text-white hover:bg-green-700 cursor-pointer"
+              "bg-green-600 text-white hover:bg-green-700",
+              any_running && "bg-gray-100 text-gray-400 hover:bg-gray-100 cursor-not-allowed"
             ),
             children: any_running ? "Running..." : "Run All"
           }