Port

import { LabeledPort } from "@bbox-ui/core";

export function PortDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-12 py-10">
      <LabeledPort state="empty" diameter="md" textLayout="bot">empty</LabeledPort>
      <LabeledPort state="valueSet" diameter="md" textLayout="bot">default</LabeledPort>
      <LabeledPort state="wired" diameter="md" textLayout="bot">wired</LabeledPort>
      <LabeledPort state="received" diameter="md" textLayout="bot">received</LabeledPort>
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add zacharyyamaoka/bbox-ui/port

Features

Four states — empty (hollow ring), default (filled neutral), wired (accent dot inside the ring), and received, a runtime flag that is never persisted as document state.
Six text layouts placing the slot relative to the dot, including two offset variants for a dot that hangs outside a block edge.
Three diameters and three text rungs, all measured off the source wireframe rather than chosen by eye.
Zero canvas assumptions — no pointer listeners, no self-measurement, no z-index.

Usage

import { Port } from "@/components/bbox/port";

<Port state="wired" size="md" textLayout="right">image</Port>

Examples

Text layout

Where the slot sits relative to the dot. The -offset variants push the label further out, for a dot painted on a block's boundary.

import { LabeledPort } from "@bbox-ui/core";

export function PortLayouts() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-x-16 gap-y-10 py-10">
      <LabeledPort state="wired" textLayout="top">top</LabeledPort>
      <LabeledPort state="wired" textLayout="bot">bot</LabeledPort>
      <LabeledPort state="wired" textLayout="right">right</LabeledPort>
      <LabeledPort state="wired" textLayout="left">left</LabeledPort>
    </div>
  );
}

Diameter

import { LabeledPort } from "@bbox-ui/core";

export function PortSizes() {
  return (
    <div className="flex flex-wrap items-end justify-center gap-12 py-10">
      <LabeledPort state="wired" diameter="sm" textLayout="bot">sm 14</LabeledPort>
      <LabeledPort state="wired" diameter="md" textLayout="bot">md 25</LabeledPort>
      <LabeledPort state="wired" diameter="lg" textLayout="bot">lg 36</LabeledPort>
    </div>
  );
}

Reference

Props

Prop	Type	Default
state	`"empty" \| "default" \| "wired" \| "received"`	`"empty"`
size	`"sm" \| "md" \| "lg"`	`"md"`
textLayout	`"top" \| "bot" \| "right" \| "left" \| "right-offset" \| "left-offset"`	`"right"`
textSize	`"md" \| "lg" \| "xl"`	`"md"`