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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

import { cx } from "zeb/react";
import { Separator } from "zeb/ui/separator";

/**
 * Item — shadcn/ui's item, on Zebflow's engine.
 *
 * No `asChild`: pass `as="a"` and an `href` instead (see button.tsx).
 * Upstream tints a child `<a>` on hover with the `[a]:hover:bg-accent/50`
 * bracket variant; dropped — pass `className="hover:bg-accent/50"` to that
 * child anchor yourself. `ItemMedia`'s icon/image auto-sizing
 * (`[&_svg…]`, `[&_img]:…`) and its `group-has-[…]/item:…` shift when a
 * description is present are dropped the same way — arbitrary/named-group
 * selectors this engine doesn't compile.
 */

const ITEM_VARIANTS = {
  default: "border-transparent bg-transparent",
  outline: "border-border",
  muted: "border-transparent bg-muted/50",
};

const ITEM_SIZES = {
  default: "gap-4 p-4",
  sm: "gap-2.5 px-4 py-3",
};

export function Item({ className, variant = "default", size = "default", as: Tag = "div", children, ...rest }) {
  const Comp = Tag;
  return (
    <Comp
      data-slot="item"
      data-variant={variant}
      data-size={size}
      className={cx(
        "flex flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
        ITEM_VARIANTS[variant] ?? ITEM_VARIANTS.default,
        ITEM_SIZES[size] ?? ITEM_SIZES.default,
        className
      )}
      {...rest}
    >
      {children}
    </Comp>
  );
}

const ITEM_MEDIA_VARIANTS = {
  default: "bg-transparent",
  icon: "size-8 rounded-sm border bg-muted",
  image: "size-10 overflow-hidden rounded-sm",
};

export function ItemMedia({ className, variant = "default", children, ...rest }) {
  return (
    <div
      data-slot="item-media"
      data-variant={variant}
      className={cx("flex shrink-0 items-center justify-center gap-2", ITEM_MEDIA_VARIANTS[variant] ?? ITEM_MEDIA_VARIANTS.default, className)}
      {...rest}
    >
      {children}
    </div>
  );
}

export function ItemContent({ className, children, ...rest }) {
  return (
    <div data-slot="item-content" className={cx("flex flex-1 flex-col gap-1", className)} {...rest}>
      {children}
    </div>
  );
}

export function ItemTitle({ className, children, ...rest }) {
  return (
    <div data-slot="item-title" className={cx("flex w-fit items-center gap-2 text-sm leading-snug font-medium", className)} {...rest}>
      {children}
    </div>
  );
}

export function ItemDescription({ className, children, ...rest }) {
  return (
    <p data-slot="item-description" className={cx("line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground", className)} {...rest}>
      {children}
    </p>
  );
}

export function ItemActions({ className, children, ...rest }) {
  return (
    <div data-slot="item-actions" className={cx("flex items-center gap-2", className)} {...rest}>
      {children}
    </div>
  );
}

export function ItemGroup({ className, children, ...rest }) {
  return (
    <div role="list" data-slot="item-group" className={cx("flex flex-col", className)} {...rest}>
      {children}
    </div>
  );
}

export function ItemSeparator({ className, ...rest }) {
  return <Separator data-slot="item-separator" orientation="horizontal" className={cx("my-0", className)} {...rest} />;
}

export function ItemHeader({ className, children, ...rest }) {
  return (
    <div data-slot="item-header" className={cx("flex basis-full items-center justify-between gap-2", className)} {...rest}>
      {children}
    </div>
  );
}

export function ItemFooter({ className, children, ...rest }) {
  return (
    <div data-slot="item-footer" className={cx("flex basis-full items-center justify-between gap-2", className)} {...rest}>
      {children}
    </div>
  );
}

export default Item;