zebflow 0.7.9

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

import { cx } from "zeb";

const VARIANTS = {
  default:     "bg-gray-900 text-white hover:bg-gray-800 shadow",
  destructive: "bg-red-500 text-white hover:bg-red-600 shadow-sm",
  outline:     "border border-gray-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-gray-900 shadow-sm",
  secondary:   "bg-gray-100 text-gray-900 hover:bg-gray-200 shadow-sm",
  ghost:       "text-gray-900 hover:bg-gray-100 hover:text-gray-900",
  link:        "text-gray-900 underline-offset-4 hover:underline",
};

const SIZES = {
  default: "h-9 px-4 py-2",
  sm:      "h-8 rounded-md px-3 text-xs",
  lg:      "h-10 rounded-md px-8",
  icon:    "h-9 w-9",
};

interface ButtonProps {
  variant?: keyof typeof VARIANTS;
  size?: keyof typeof SIZES;
  className?: string;
  children?: any;
  type?: "button" | "submit" | "reset";
  disabled?: boolean;
  onClick?: (e: any) => void;
  [key: string]: any;
}

export function Button({
  variant = "default",
  size = "default",
  className,
  children,
  type = "button",
  ...rest
}: ButtonProps) {
  return (
    <button
      type={type}
      className={cx(
        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50",
        VARIANTS[variant] ?? VARIANTS.default,
        SIZES[size] ?? SIZES.default,
        className
      )}
      {...rest}
    >
      {children}
    </button>
  );
}

export default Button;