zebflow 0.11.14

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

import { cx } from "zeb/react";

/**
 * Badge — shadcn/ui's badge, on Zebflow's engine.
 *
 * No `asChild`: pass `as="a"` and an `href` instead (see button.tsx). Upstream
 * tints an anchor child's hover state with the `[a&]:hover:…` arbitrary
 * variant; that bracket selector isn't compiled, so the hover class here
 * applies unconditionally regardless of tag — the visual result is the same
 * whether the badge renders as a `<span>` or an `<a>`.
 *
 * The border colour is set by the variant, never by the base: two colours on
 * one element are decided by stylesheet order, not by which the variant
 * meant to override, so `outline` would lose its border to the base.
 */

const VARIANTS = {
  default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/90",
  secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90",
  destructive:
    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
  outline: "border-border text-foreground hover:bg-accent hover:text-accent-foreground",
  ghost: "border-transparent hover:bg-accent hover:text-accent-foreground",
  link: "border-transparent text-primary underline-offset-4 hover:underline",
};

const BASE =
  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40";

export function badgeVariants({ variant = "default", className = "" } = {}) {
  return cx(BASE, VARIANTS[variant] ?? VARIANTS.default, className);
}

export function Badge({ className, variant = "default", as: Tag = "span", children, ...rest }) {
  const Comp = Tag;
  return (
    <Comp data-slot="badge" data-variant={variant} className={badgeVariants({ variant, className })} {...rest}>
      {children}
    </Comp>
  );
}

export default Badge;