Components
Inline Citation
A small superscript citation marker. Purely presentational — no Morphos equivalent.
Installation
npx kosmesis add inline-citationpnpm dlx kosmesis add inline-citationyarn dlx kosmesis add inline-citationbunx kosmesis add inline-citationCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { Component } from "@praxisjs/decorators";import type { Children } from "@praxisjs/shared";import { cn } from "@/lib/utils";export interface InlineCitationProps { index: number; href?: string; class?: string; children?: Children;}@Component()export class InlineCitation extends StatelessComponent<InlineCitationProps> { render() { const { index, href, class: cls, children } = this.props; const Tag = href ? "a" : "span"; return ( <Tag href={href} target={href ? "_blank" : undefined} rel={href ? "noopener noreferrer" : undefined} title={typeof children === "string" ? children : undefined} class={cn( "ml-0.5 inline-flex size-4 -translate-y-1 items-center justify-center rounded-full bg-muted align-super text-[10px] font-medium text-muted-foreground", href && "hover:bg-accent hover:text-accent-foreground", cls, )} > {index} </Tag> ); }}Install the following dependencies:
npm install @praxisjs/csspnpm add @praxisjs/cssyarn add @praxisjs/cssbun add @praxisjs/cssCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { cx, Stylesheet, Styled, tokenVars } from "@praxisjs/css";import { Component } from "@praxisjs/decorators";import type { Children } from "@praxisjs/shared";import { KosmesisTokens } from "@/lib/kosmesis-theme";const t = tokenVars(KosmesisTokens);class InlineCitationStyles extends Stylesheet { $marker = this.css({ marginLeft: "0.125rem", display: "inline-flex", height: "1rem", width: "1rem", transform: "translateY(-0.25rem)", alignItems: "center", justifyContent: "center", borderRadius: "9999px", backgroundColor: t.muted, verticalAlign: "super", fontSize: "0.625rem", fontWeight: 500, color: t.mutedForeground, }); $link = this.css({}).on("&:hover", { backgroundColor: t.accent, color: t.accentForeground });}export interface InlineCitationProps { index: number; href?: string; class?: string; children?: Children;}@Component()export class InlineCitation extends StatelessComponent<InlineCitationProps> { @Styled(InlineCitationStyles) $s!: InlineCitationStyles; render() { const { index, href, class: cls, children } = this.props; const Tag = href ? "a" : "span"; return ( <Tag href={href} target={href ? "_blank" : undefined} rel={href ? "noopener noreferrer" : undefined} title={typeof children === "string" ? children : undefined} class={cx(this.$s.$marker, href && this.$s.$link, cls)} > {index} </Tag> ); }}Examples
About
Purely presentational — no Morphos equivalent. Renders as a link when href is given, otherwise a
plain span; children (if a string) becomes the native title tooltip shown on hover.
Usage
import { InlineCitation } from "@/components/ui/inline-citation";
<p>
Refunds are available within 30 days
<InlineCitation index={1} href="https://example.com/refund-policy">Refund policy</InlineCitation>.
</p>Props
| Prop | Type | Default |
|---|---|---|
index | number | — |
href | string | — |
class | string | — |