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

import { cx } from "zeb";

const VARIANTS = {
  default: "bg-transparent hover:bg-gray-100 hover:text-gray-900 data-[state=on]:bg-gray-100 data-[state=on]:text-gray-900",
  outline: "border border-gray-200 bg-transparent hover:bg-gray-100 hover:text-gray-900 data-[state=on]:bg-gray-100 data-[state=on]:text-gray-900",
};

const SIZES = {
  default: "h-9 px-3 min-w-9",
  sm:      "h-8 px-2 min-w-8",
  lg:      "h-10 px-5 min-w-10",
};

interface ToggleProps {
  variant?: keyof typeof VARIANTS;
  size?: keyof typeof SIZES;
  pressed?: boolean;
  defaultPressed?: boolean;
  onPressedChange?: (pressed: boolean) => void;
  disabled?: boolean;
  className?: string;
  children?: any;
  [key: string]: any;
}

export function Toggle({ variant = "default", size = "default", pressed, defaultPressed, onPressedChange, disabled, className, children, ...rest }: ToggleProps) {
  const handleClick = () => {
    if (!disabled) onPressedChange?.(!pressed);
  };

  return (
    <button
      type="button"
      role="button"
      aria-pressed={pressed}
      data-state={pressed ? "on" : "off"}
      disabled={disabled}
      onClick={handleClick}
      className={cx(
        "inline-flex items-center justify-center gap-2 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 Toggle;