Anchor Port
Marqueur de port pour les entrees, sorties et liens bidirectionnels d'objets sur le canevas. Installez Anchor Port depuis le registre VLLNT UI avec la CLI shadcn.
Marqueur de port pour les entrees, sorties et liens bidirectionnels d'objets sur le canevas. Fait partie de la famille utility dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Anchor Port a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/anchor-port.jsonSource
import { cn } from "../../lib/utils";
export type AnchorPortProps = React.ComponentPropsWithoutRef<"span"> & {
side?: "bottom" | "left" | "right" | "top";
state?: "active" | "blocked" | "idle";
tone?: "bidirectional" | "input" | "output";
};
const toneClasses: Record<NonNullable<AnchorPortProps["tone"]>, string> = {
bidirectional:
"border-violet-500/40 bg-violet-500/15 text-violet-700 dark:text-violet-300",
input: "border-sky-500/40 bg-sky-500/15 text-sky-700 dark:text-sky-300",
output:
"border-emerald-500/40 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
};
const stateClasses: Record<NonNullable<AnchorPortProps["state"]>, string> = {
active: "scale-100 opacity-100",
blocked: "opacity-60 saturate-50",
idle: "opacity-80",
};
const sideClasses: Record<NonNullable<AnchorPortProps["side"]>, string> = {
bottom: "self-end",
left: "self-start",
right: "self-end",
top: "self-start",
};
const AnchorPort = ({
className,
ref,
side = "right",
state = "idle",
tone = "bidirectional",
...props
}: AnchorPortProps & { ref?: React.Ref<HTMLSpanElement> }) => (
<span
aria-label={props["aria-label"] ?? `${tone} ${side} port ${state}`}
className={cn(
"inline-flex size-7 items-center justify-center rounded-full border shadow-sm",
toneClasses[tone],
stateClasses[state],
sideClasses[side],
className,
)}
data-side={side}
data-state={state}
data-tone={tone}
ref={ref}
role="img"
{...props}
>
<span className="size-2.5 rounded-full bg-current" />
</span>
);
AnchorPort.displayName = "AnchorPort";
export { AnchorPort };
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.