zebflow 0.9.0

import { Button } from "zeb/ui/button";
import { SectionHeading, Entry, Matrix } from "@/pages/dev/design-system/components/gallery";

/**
 * zeb/ui — the component library a project imports without installing.
 * These entries render the library's own source, inlined by the compiler,
 * on the studio's theme: what a user page gets, judged next to the studio's
 * primitives. `file="zeb/ui/<name>"` is what the guard reads.
 */

const VARIANTS = ["default", "secondary", "outline", "ghost", "destructive", "link"];
const SIZES = ["lg", "default", "sm", "xs", "icon", "icon-sm", "icon-xs"];

export default function ZebUiActionsSection() {
  return (
    <div>
      <SectionHeading
        title="zeb/ui · Actions"
        description={'import { Button } from "zeb/ui/button" — shadcn\'s API on Zebflow\'s engine. No install; clone the file to own it.'}
      />

      <Entry
        name="Button"
        file="zeb/ui/button"
        description="shadcn's variants and sizes, verbatim. as='a' replaces asChild."
        code={`import { Button } from "zeb/ui/button";

<Button>Save</Button>
<Button variant="outline" size="sm">Cancel</Button>
<Button variant="destructive" size="icon" aria-label="Delete">✕</Button>
<Button as="a" href="/home" variant="link">Home</Button>`}
      >
        <Matrix
          rows={VARIANTS}
          cols={SIZES}
          render={(variant, size) => (
            <Button variant={variant} size={size} aria-label={size.startsWith("icon") ? variant : undefined}>
              {size.startsWith("icon") ? "✓" : "Button"}
            </Button>
          )}
        />
        <div className="mt-6 flex flex-wrap items-center gap-3 border-t border-border pt-5">
          <Button disabled>Disabled</Button>
          <Button variant="outline" disabled>Disabled</Button>
          <Button as="a" href="#" variant="link">as an anchor</Button>
        </div>
      </Entry>
    </div>
  );
}