fromsrc 0.0.0 → 0.0.2

package/dist/components/formlabel.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { Tooltip } from './tooltip';
+
+function FormLabelInner({ label, tooltip, htmlFor, id }) {
+  return /* @__PURE__ */ jsxs("label", { id, htmlFor, className: "flex items-center gap-1.5 text-sm font-medium text-fg", children: [
+    label,
+    tooltip && /* @__PURE__ */ jsx(Tooltip, { content: tooltip, children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className: "h-3.5 w-3.5 text-muted",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }),
+          /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeWidth: 2, d: "M12 16v-4m0-4h.01" })
+        ]
+      }
+    ) })
+  ] });
+}
+const FormLabel = memo(FormLabelInner);
+
+export { FormLabel };

package/dist/components/github.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+/**
+ * Props for the Github component
+ */
+interface GithubProps {
+    /** Repository in owner/name format */
+    repo: string;
+}
+declare function GithubComponent({ repo }: GithubProps): JSX.Element;
+declare const Github: react.MemoExoticComponent<typeof GithubComponent>;
+
+export { Github, type GithubProps };

package/dist/components/github.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useEffect } from 'react';
+
+function format(n) {
+  if (n >= 1e3) {
+    return `${(n / 1e3).toFixed(1)}k`;
+  }
+  return n.toString();
+}
+function GithubComponent({ repo }) {
+  const [data, setData] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    async function load() {
+      try {
+        const res = await fetch(`https://api.github.com/repos/${repo}`);
+        if (!res.ok || !mounted) return;
+        const json = await res.json();
+        if (!mounted) return;
+        const stars = typeof json.stargazers_count === "number" ? json.stargazers_count : 0;
+        const forks = typeof json.forks_count === "number" ? json.forks_count : 0;
+        setData({
+          stars,
+          forks,
+          description: json.description ?? null
+        });
+      } catch {
+        return;
+      }
+    }
+    load();
+    return () => {
+      mounted = false;
+    };
+  }, [repo]);
+  if (!data) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-busy": "true",
+        "aria-label": `Loading ${repo} repository`,
+        className: "my-4 p-4 rounded-lg border border-line bg-surface/50 animate-pulse",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "h-4 bg-surface rounded w-1/3 mb-2", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("div", { className: "h-3 bg-surface/50 rounded w-2/3", "aria-hidden": "true" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: `https://github.com/${repo}`,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": `View ${repo} repository on GitHub with ${format(data.stars)} stars and ${format(data.forks)} forks`,
+      className: "my-4 p-4 rounded-lg border border-line bg-surface/30 hover:bg-surface/50 transition-colors flex items-start gap-4 no-underline",
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-6 h-6 text-fg shrink-0 mt-0.5",
+            fill: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fillRule: "evenodd",
+                d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-fg mb-1", children: repo }),
+          data.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted mb-2 line-clamp-2", children: data.description }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-xs text-muted", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z" }) }),
+              format(data.stars)
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-.878a2.25 2.25 0 111.5 0v.878a2.25 2.25 0 01-2.25 2.25h-1.5v2.128a2.251 2.251 0 11-1.5 0V8.5h-1.5A2.25 2.25 0 013.5 6.25v-.878a2.25 2.25 0 111.5 0zM5 3.25a.75.75 0 10-1.5 0 .75.75 0 001.5 0zm6.75.75a.75.75 0 10.75-.75.75.75 0 00-.75.75z" }) }),
+              format(data.forks)
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const Github = memo(GithubComponent);
+
+export { Github };

package/dist/components/graph.d.ts

@@ -0,0 +1,36 @@
+import { JSX } from 'react';
+
+/** Node in the graph visualization */
+interface GraphNode {
+    /** Unique identifier for the node */
+    id: string;
+    /** Display title shown below the node */
+    title: string;
+    /** Optional grouping category */
+    group?: string;
+}
+/** Connection between two nodes */
+interface GraphLink {
+    /** ID of the source node */
+    source: string;
+    /** ID of the target node */
+    target: string;
+}
+/** Props for the Graph component */
+interface GraphProps {
+    /** Array of nodes to display */
+    nodes: GraphNode[];
+    /** Array of links connecting nodes */
+    links: GraphLink[];
+    /** Callback when a node is clicked or activated */
+    onNodeClick?: (node: GraphNode) => void;
+    /** Canvas width in pixels */
+    width?: number;
+    /** Canvas height in pixels */
+    height?: number;
+    /** Accessible label for the graph */
+    label?: string;
+}
+declare function Graph({ nodes, links, onNodeClick, width, height, label, }: GraphProps): JSX.Element;
+
+export { Graph, type GraphLink, type GraphNode, type GraphProps };

package/dist/components/graph.js

@@ -0,0 +1,210 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback } from 'react';
+
+const NODE_RADIUS = 8;
+const HIT_RADIUS = NODE_RADIUS + 4;
+function Graph({
+  nodes,
+  links,
+  onNodeClick,
+  width = 600,
+  height = 400,
+  label = "Graph visualization"
+}) {
+  const canvasRef = useRef(null);
+  const [positions, setPositions] = useState(/* @__PURE__ */ new Map());
+  const [hovered, setHovered] = useState(null);
+  const [focused, setFocused] = useState(-1);
+  useEffect(() => {
+    const newPositions = /* @__PURE__ */ new Map();
+    nodes.forEach((node, i) => {
+      const angle = 2 * Math.PI * i / nodes.length;
+      const radius = Math.min(width, height) * 0.35;
+      newPositions.set(node.id, {
+        x: width / 2 + radius * Math.cos(angle),
+        y: height / 2 + radius * Math.sin(angle)
+      });
+    });
+    setPositions(newPositions);
+  }, [nodes, width, height]);
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    ctx.scale(dpr, dpr);
+    ctx.clearRect(0, 0, width, height);
+    ctx.strokeStyle = "#333";
+    ctx.lineWidth = 1;
+    for (const link of links) {
+      const source = positions.get(link.source);
+      const target = positions.get(link.target);
+      if (!source || !target) continue;
+      ctx.beginPath();
+      ctx.moveTo(source.x, source.y);
+      ctx.lineTo(target.x, target.y);
+      ctx.stroke();
+    }
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      if (!node) continue;
+      const pos = positions.get(node.id);
+      if (!pos) continue;
+      const isHovered = hovered === node.id;
+      const isFocused = focused === i;
+      ctx.beginPath();
+      ctx.arc(pos.x, pos.y, NODE_RADIUS, 0, 2 * Math.PI);
+      ctx.fillStyle = isHovered || isFocused ? "#1a1a1a" : "#0a0a0a";
+      ctx.fill();
+      ctx.strokeStyle = isHovered || isFocused ? "#888" : "#666";
+      ctx.lineWidth = isHovered || isFocused ? 3 : 2;
+      ctx.stroke();
+      if (isFocused) {
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, NODE_RADIUS + 4, 0, 2 * Math.PI);
+        ctx.strokeStyle = "#4f9";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      }
+      ctx.fillStyle = isHovered || isFocused ? "#ccc" : "#999";
+      ctx.font = "12px system-ui";
+      ctx.textAlign = "center";
+      ctx.fillText(node.title, pos.x, pos.y + 24);
+    }
+  }, [nodes, links, positions, width, height, hovered, focused]);
+  useEffect(() => {
+    draw();
+  }, [draw]);
+  const findNode = useCallback(
+    (x, y) => {
+      for (const node of nodes) {
+        const pos = positions.get(node.id);
+        if (!pos) continue;
+        const dx = x - pos.x;
+        const dy = y - pos.y;
+        if (dx * dx + dy * dy < HIT_RADIUS * HIT_RADIUS) {
+          return node;
+        }
+      }
+      return null;
+    },
+    [nodes, positions]
+  );
+  const handleClick = useCallback(
+    (e) => {
+      if (!onNodeClick) return;
+      const rect = canvasRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const node = findNode(x, y);
+      if (node) onNodeClick(node);
+    },
+    [onNodeClick, findNode]
+  );
+  const handleMove = useCallback(
+    (e) => {
+      const rect = canvasRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const node = findNode(x, y);
+      setHovered(node?.id ?? null);
+    },
+    [findNode]
+  );
+  const handleLeave = useCallback(() => {
+    setHovered(null);
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (nodes.length === 0) return;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+        case "Tab": {
+          if (e.key === "Tab" && e.shiftKey) {
+            e.preventDefault();
+            setFocused((prev) => (prev - 1 + nodes.length) % nodes.length);
+          } else if (e.key === "Tab") {
+            e.preventDefault();
+            setFocused((prev) => (prev + 1) % nodes.length);
+          } else {
+            e.preventDefault();
+            setFocused((prev) => (prev + 1) % nodes.length);
+          }
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowUp": {
+          e.preventDefault();
+          setFocused((prev) => (prev - 1 + nodes.length) % nodes.length);
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          setFocused(0);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          setFocused(nodes.length - 1);
+          break;
+        }
+        case "Enter":
+        case " ": {
+          if (focused >= 0 && onNodeClick) {
+            e.preventDefault();
+            const node = nodes[focused];
+            if (node) onNodeClick(node);
+          }
+          break;
+        }
+        case "Escape": {
+          e.preventDefault();
+          setFocused(-1);
+          canvasRef.current?.blur();
+          break;
+        }
+      }
+    },
+    [nodes, focused, onNodeClick]
+  );
+  const handleFocus = useCallback(() => {
+    if (focused < 0 && nodes.length > 0) {
+      setFocused(0);
+    }
+  }, [focused, nodes.length]);
+  const handleBlur = useCallback(() => {
+    setFocused(-1);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      width,
+      height,
+      onClick: handleClick,
+      onMouseMove: handleMove,
+      onMouseLeave: handleLeave,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      tabIndex: onNodeClick ? 0 : -1,
+      role: "img",
+      "aria-label": label,
+      className: "rounded-lg border border-line bg-bg outline-none focus-visible:ring-2 focus-visible:ring-green-400",
+      style: {
+        cursor: hovered && onNodeClick ? "pointer" : "default",
+        width,
+        height
+      }
+    }
+  );
+}
+
+export { Graph };

package/dist/components/heading.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { ReactNode, JSX } from 'react';
+
+/**
+ * Props for the Anchor component
+ */
+interface AnchorProps {
+    /** Heading level (1-6) */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Unique identifier for the anchor link */
+    id: string;
+    /** Content to display inside the heading */
+    children: ReactNode;
+    /** Optional additional CSS classes */
+    className?: string;
+}
+declare const Anchor: react.NamedExoticComponent<AnchorProps>;
+declare function H1(props: Omit<AnchorProps, "level">): JSX.Element;
+declare function H2(props: Omit<AnchorProps, "level">): JSX.Element;
+declare function H3(props: Omit<AnchorProps, "level">): JSX.Element;
+declare function H4(props: Omit<AnchorProps, "level">): JSX.Element;
+declare function H5(props: Omit<AnchorProps, "level">): JSX.Element;
+declare function H6(props: Omit<AnchorProps, "level">): JSX.Element;
+
+export { Anchor, type AnchorProps, H1, H2, H3, H4, H5, H6 };

package/dist/components/heading.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useCallback } from 'react';
+import { useCopy } from '../hooks/copy';
+
+const sizes = {
+  1: "text-3xl font-bold",
+  2: "text-2xl font-semibold",
+  3: "text-xl font-semibold",
+  4: "text-lg font-medium",
+  5: "text-base font-medium",
+  6: "text-sm font-medium"
+};
+const Anchor = memo(function Anchor2({
+  level,
+  id,
+  children,
+  className
+}) {
+  const { copied, copy } = useCopy();
+  const Tag = `h${level}`;
+  const handleClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      const url = `${window.location.origin}${window.location.pathname}#${id}`;
+      copy(url);
+      window.history.pushState(null, "", `#${id}`);
+    },
+    [id, copy]
+  );
+  return /* @__PURE__ */ jsxs(Tag, { id, className: `group relative scroll-mt-20 ${sizes[level]} ${className || ""}`, children: [
+    /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: `#${id}`,
+        onClick: handleClick,
+        className: "absolute -left-6 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity",
+        "aria-label": "copy link",
+        children: copied ? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            viewBox: "0 0 16 16",
+            fill: "currentColor",
+            className: "size-4 text-green-500",
+            children: /* @__PURE__ */ jsx("path", { d: "M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" })
+          }
+        ) : /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            viewBox: "0 0 16 16",
+            fill: "currentColor",
+            className: "size-4 text-fg/40 hover:text-fg/60",
+            children: /* @__PURE__ */ jsx("path", { d: "M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z" })
+          }
+        )
+      }
+    ),
+    children
+  ] });
+});
+function H1(props) {
+  return /* @__PURE__ */ jsx(Anchor, { level: 1, ...props });
+}
+function H2(props) {
+  return /* @__PURE__ */ jsx(Anchor, { level: 2, ...props });
+}
+function H3(props) {
+  return /* @__PURE__ */ jsx(Anchor, { level: 3, ...props });
+}
+function H4(props) {
+  return /* @__PURE__ */ jsx(Anchor, { level: 4, ...props });
+}
+function H5(props) {
+  return /* @__PURE__ */ jsx(Anchor, { level: 5, ...props });
+}
+function H6(props) {
+  return /* @__PURE__ */ jsx(Anchor, { level: 6, ...props });
+}
+
+export { Anchor, H1, H2, H3, H4, H5, H6 };

package/dist/components/headingcopy.d.ts

@@ -0,0 +1,3 @@
+declare function HeadingCopy(): null;
+
+export { HeadingCopy };

package/dist/components/headingcopy.js

@@ -0,0 +1,31 @@
+"use client";
+import { useEffect } from 'react';
+
+function HeadingCopy() {
+  useEffect(() => {
+    function handler(e) {
+      const target = e.target;
+      if (!(target instanceof HTMLElement)) return;
+      if (!target.classList.contains("heading-anchor-icon")) return;
+      e.preventDefault();
+      const anchor = target.closest("a");
+      if (!anchor) return;
+      const id = anchor.getAttribute("href")?.replace("#", "");
+      if (!id) return;
+      const url = window.location.origin + window.location.pathname + "#" + id;
+      navigator.clipboard.writeText(url).then(() => {
+        const original = target.textContent;
+        target.textContent = "\u2713";
+        setTimeout(() => {
+          target.textContent = original;
+        }, 1500);
+      }).catch(() => {
+      });
+    }
+    document.addEventListener("click", handler);
+    return () => document.removeEventListener("click", handler);
+  }, []);
+  return null;
+}
+
+export { HeadingCopy };

package/dist/components/hero.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+
+interface HeroProps {
+    title: string;
+    description?: string;
+    actions?: {
+        label: string;
+        href: string;
+        variant?: "primary" | "secondary";
+    }[];
+    badge?: string;
+    className?: string;
+}
+declare const Hero: react.NamedExoticComponent<HeroProps>;
+
+export { Hero, type HeroProps };

package/dist/components/hero.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const Hero = memo(function Hero2({
+  title,
+  description,
+  actions,
+  badge,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center px-6 py-20 text-center ${className ?? ""}`, children: [
+    badge && /* @__PURE__ */ jsx("span", { className: "mb-4 rounded-full border border-line px-3 py-1 text-xs text-muted", children: badge }),
+    /* @__PURE__ */ jsx("h1", { className: "max-w-3xl text-4xl font-bold tracking-tight text-fg sm:text-5xl lg:text-6xl", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "mt-6 max-w-2xl text-lg text-muted", children: description }),
+    actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: actions.map((action) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: action.href,
+        className: action.variant === "secondary" ? "rounded-lg border border-line bg-surface px-5 py-2.5 text-sm font-medium text-fg transition-colors hover:bg-surface/80" : "rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-accent/90",
+        children: action.label
+      },
+      action.href
+    )) })
+  ] });
+});
+
+export { Hero };

package/dist/components/highlight.d.ts

@@ -0,0 +1,41 @@
+import * as react from 'react';
+import { ReactNode, JSX } from 'react';
+
+/**
+ * Available highlight colors for the Highlight component
+ */
+type HighlightColor = "yellow" | "green" | "blue" | "red" | "purple";
+/**
+ * Props for the Highlight component
+ */
+interface HighlightProps {
+    /** Content to highlight */
+    children: ReactNode;
+    /** Highlight color variant */
+    color?: HighlightColor;
+}
+declare function HighlightBase({ children, color }: HighlightProps): JSX.Element;
+/**
+ * Renders highlighted text with customizable color
+ */
+declare const Highlight: react.MemoExoticComponent<typeof HighlightBase>;
+/**
+ * Available underline styles for the Underline component
+ */
+type UnderlineStyle = "solid" | "wavy" | "dotted" | "dashed";
+/**
+ * Props for the Underline component
+ */
+interface UnderlineProps {
+    /** Content to underline */
+    children: ReactNode;
+    /** Underline style variant */
+    style?: UnderlineStyle;
+}
+declare function UnderlineBase({ children, style }: UnderlineProps): JSX.Element;
+/**
+ * Renders underlined text with customizable style
+ */
+declare const Underline: react.MemoExoticComponent<typeof UnderlineBase>;
+
+export { Highlight, type HighlightColor, type HighlightProps, Underline, type UnderlineProps, type UnderlineStyle };

package/dist/components/highlight.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const colors = {
+  yellow: "bg-yellow-500/20 text-yellow-200",
+  green: "bg-green-500/20 text-green-200",
+  blue: "bg-blue-500/20 text-blue-200",
+  red: "bg-red-500/20 text-red-200",
+  purple: "bg-purple-500/20 text-purple-200"
+};
+function HighlightBase({ children, color = "yellow" }) {
+  return /* @__PURE__ */ jsx(
+    "mark",
+    {
+      className: `rounded px-1 transition-colors ${colors[color]}`,
+      role: "mark",
+      "aria-label": `highlighted text in ${color}`,
+      children
+    }
+  );
+}
+const Highlight = memo(HighlightBase);
+const underlineStyles = {
+  solid: "decoration-solid",
+  wavy: "decoration-wavy",
+  dotted: "decoration-dotted",
+  dashed: "decoration-dashed"
+};
+function UnderlineBase({ children, style = "solid" }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `underline decoration-accent underline-offset-4 transition-colors ${underlineStyles[style]}`,
+      role: "text",
+      "aria-label": `underlined text with ${style} style`,
+      children
+    }
+  );
+}
+const Underline = memo(UnderlineBase);
+
+export { Highlight, Underline };