fromsrc 0.0.0 → 0.0.1

package/dist/components/breadcrumb.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { memo } from 'react';
+
+function BreadcrumbBase({
+  base = "/docs",
+  rootLabel,
+  indexLabel
+}) {
+  const pathname = usePathname();
+  const normalizedBase = base.replace(/^\/+|\/+$/g, "");
+  const fallbackRoot = normalizedBase.length > 0 ? normalizedBase.replace(/-/g, " ") : "home";
+  const root = rootLabel ?? fallbackRoot;
+  const index = indexLabel ?? "index";
+  const segments = pathname.replace(base, "").split("/").filter(Boolean);
+  const items = segments.map((segment, i) => ({
+    href: `${base}/${segments.slice(0, i + 1).join("/")}`,
+    label: segment.replace(/-/g, " ")
+  }));
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "text-xs text-muted", children: /* @__PURE__ */ jsxs("ol", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { href: base, className: "hover:text-fg transition-colors", children: root }) }),
+    items.length === 0 ? /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-dim", children: "/" }),
+      /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "text-fg", children: index })
+    ] }) : items.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-dim", children: "/" }),
+      i === items.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "text-fg", children: item.label }) : /* @__PURE__ */ jsx(Link, { href: item.href, className: "hover:text-fg transition-colors", children: item.label })
+    ] }, item.href))
+  ] }) });
+}
+const Breadcrumb = memo(BreadcrumbBase);
+
+export { Breadcrumb };

package/dist/components/breadcrumbnav.d.ts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { ReactNode, JSX } from 'react';
+
+interface BreadcrumbNavProps {
+    path: string;
+    labels?: Record<string, string>;
+    separator?: ReactNode;
+    className?: string;
+    homeLabel?: string;
+    homeHref?: string;
+}
+declare function BreadcrumbNavBase({ path, labels, separator, className, homeLabel, homeHref, }: BreadcrumbNavProps): JSX.Element;
+declare const BreadcrumbNav: react.MemoExoticComponent<typeof BreadcrumbNavBase>;
+
+export { BreadcrumbNav, type BreadcrumbNavProps };

package/dist/components/breadcrumbnav.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Link from 'next/link';
+import { memo } from 'react';
+
+function format(slug) {
+  return slug.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function build(path, labels) {
+  const segments = path.split("/").filter(Boolean);
+  return segments.map((seg, i) => ({
+    href: `/${segments.slice(0, i + 1).join("/")}`,
+    label: labels?.[seg] ?? format(seg)
+  }));
+}
+function jsonld(crumbs, homeLabel, homeHref) {
+  return JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: [
+      { "@type": "ListItem", position: 1, name: homeLabel, item: homeHref },
+      ...crumbs.map((c, i) => ({
+        "@type": "ListItem",
+        position: i + 2,
+        name: c.label,
+        item: `${homeHref.replace(/\/$/, "")}${c.href}`
+      }))
+    ]
+  }).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+function BreadcrumbNavBase({
+  path,
+  labels,
+  separator,
+  className,
+  homeLabel = "Home",
+  homeHref = "/"
+}) {
+  const crumbs = build(path, labels);
+  const sep = separator ?? "/";
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "breadcrumb", className: className ?? "flex items-center gap-1 text-sm text-muted", children: [
+    /* @__PURE__ */ jsx(
+      "script",
+      {
+        type: "application/ld+json",
+        dangerouslySetInnerHTML: { __html: jsonld(crumbs, homeLabel, homeHref) }
+      }
+    ),
+    /* @__PURE__ */ jsxs("ol", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { href: homeHref, className: "hover:text-fg transition-colors", children: homeLabel }) }),
+      crumbs.map((crumb, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-dim", children: sep }),
+        i === crumbs.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "text-fg font-medium", children: crumb.label }) : /* @__PURE__ */ jsx(Link, { href: crumb.href, className: "hover:text-fg transition-colors", children: crumb.label })
+      ] }, crumb.href))
+    ] })
+  ] });
+}
+const BreadcrumbNav = memo(BreadcrumbNavBase);
+
+export { BreadcrumbNav };

package/dist/components/button.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+/** Visual style variant for the button */
+type ButtonVariant = "default" | "primary" | "ghost" | "danger";
+/** Size variant for the button */
+type ButtonSize = "sm" | "md" | "lg";
+/**
+ * Props for the Button component
+ * @property variant - Visual style variant (default, primary, ghost, danger)
+ * @property size - Button size (sm, md, lg)
+ * @property loading - When true, shows a loading spinner and disables interaction
+ */
+interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+}
+/** Accessible button component with variants, sizes, and loading state */
+declare const Button: react.NamedExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/components/button.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, memo } from 'react';
+import { Spinner } from './spinner';
+
+const variants = {
+  default: "bg-surface text-fg border-line hover:bg-line hover:border-line",
+  primary: "bg-accent text-white border-accent hover:bg-accent/90 hover:border-accent/90",
+  ghost: "bg-transparent text-fg border-transparent hover:bg-surface",
+  danger: "bg-red-500/10 text-red-400 border-red-500/30 hover:bg-red-500/20"
+};
+const sizes = {
+  sm: "h-8 px-3 text-xs gap-1.5",
+  md: "h-10 px-4 text-sm gap-2",
+  lg: "h-12 px-6 text-base gap-2.5"
+};
+const spinnerSizes = {
+  sm: "sm",
+  md: "sm",
+  lg: "md"
+};
+const ButtonInner = forwardRef(
+  ({ variant = "default", size = "md", loading, disabled, children, className = "", ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: props.type ?? "button",
+        disabled: isDisabled,
+        "aria-disabled": isDisabled || void 0,
+        "aria-busy": loading || void 0,
+        "aria-live": loading ? "polite" : void 0,
+        className: `inline-flex items-center justify-center rounded-md border font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg disabled:cursor-not-allowed disabled:opacity-50 ${variants[variant]} ${sizes[size]} ${className}`.trim(),
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ jsx(Spinner, { size: spinnerSizes[size], className: "shrink-0", "aria-hidden": "true" }),
+          children
+        ]
+      }
+    );
+  }
+);
+ButtonInner.displayName = "Button";
+const Button = memo(ButtonInner);
+
+export { Button };

package/dist/components/callout.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { ReactNode, JSX } from 'react';
+
+/**
+ * available callout variants
+ */
+type CalloutType = "info" | "warning" | "error" | "tip" | "note";
+/**
+ * callout component props
+ * @property type - visual style variant
+ * @property title - optional heading text
+ * @property children - callout body content
+ */
+interface CalloutProps {
+    type?: CalloutType;
+    title?: string;
+    children: ReactNode;
+}
+declare function CalloutComponent({ type, title, children }: CalloutProps): JSX.Element;
+/**
+ * callout component for highlighting content
+ * @example <Callout type="tip">use shortcuts</Callout>
+ */
+declare const Callout: react.MemoExoticComponent<typeof CalloutComponent>;
+
+export { Callout, type CalloutProps, type CalloutType };

package/dist/components/callout.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const config = {
+  info: {
+    icon: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
+        clipRule: "evenodd"
+      }
+    ) }),
+    border: "border-l-blue-500",
+    bg: "bg-blue-500/10",
+    text: "text-blue-400",
+    label: "Information"
+  },
+  warning: {
+    icon: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z",
+        clipRule: "evenodd"
+      }
+    ) }),
+    border: "border-l-yellow-500",
+    bg: "bg-yellow-500/10",
+    text: "text-yellow-400",
+    label: "Warning"
+  },
+  error: {
+    icon: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z",
+        clipRule: "evenodd"
+      }
+    ) }),
+    border: "border-l-red-500",
+    bg: "bg-red-500/10",
+    text: "text-red-400",
+    label: "Error"
+  },
+  tip: {
+    icon: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M10 1a6 6 0 00-3.815 10.631C7.237 12.5 8 13.443 8 14.456v.644a.75.75 0 00.572.729 6.016 6.016 0 002.856 0A.75.75 0 0012 15.1v-.644c0-1.013.762-1.957 1.815-2.825A6 6 0 0010 1zM8.863 17.414a.75.75 0 00-.226 1.483 9.066 9.066 0 002.726 0 .75.75 0 00-.226-1.483 7.553 7.553 0 01-2.274 0z" }) }),
+    border: "border-l-green-500",
+    bg: "bg-green-500/10",
+    text: "text-green-400",
+    label: "Tip"
+  },
+  note: {
+    icon: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
+        clipRule: "evenodd"
+      }
+    ) }),
+    border: "border-l-blue-500",
+    bg: "bg-blue-500/10",
+    text: "text-blue-400",
+    label: "Note"
+  }
+};
+function CalloutComponent({ type = "info", title, children }) {
+  const cfg = config[type] || config.info;
+  const { icon, border, bg, text, label } = cfg;
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      role: "note",
+      "aria-label": label,
+      className: `my-4 rounded border-l-4 ${border} ${bg} px-3 py-2`,
+      children: [
+        title && /* @__PURE__ */ jsx("p", { className: `mb-2 font-semibold ${text}`, children: title }),
+        /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${text}`, children: [
+          /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-fg/80 [&>p]:m-0", children })
+        ] })
+      ]
+    }
+  );
+}
+const Callout = memo(CalloutComponent);
+
+export { Callout };

package/dist/components/cards.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ReactNode, JSX } from 'react';
+
+/**
+ * Container for Card components in a responsive grid layout.
+ * @property children - Card elements to display in grid
+ */
+interface CardsProps {
+    children: ReactNode;
+}
+declare function CardsBase({ children }: CardsProps): JSX.Element;
+declare const Cards: react.MemoExoticComponent<typeof CardsBase>;
+/**
+ * A card component that renders as a link or static container.
+ * @property title - card heading text
+ * @property description - optional subtext below title
+ * @property href - optional link destination, renders as anchor when provided
+ * @property icon - optional icon element displayed above title
+ * @example
+ * ```tsx
+ * <Card title="setup" href="/docs/setup" />
+ * <Card title="feature" description="details" icon={<Icon />} />
+ * ```
+ */
+interface CardProps {
+    title: string;
+    description?: string;
+    href?: string;
+    icon?: ReactNode;
+}
+declare function CardBase({ title, description, href, icon }: CardProps): JSX.Element;
+declare const Card: react.MemoExoticComponent<typeof CardBase>;
+
+export { Card, type CardProps, Cards, type CardsProps };

package/dist/components/cards.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Link from 'next/link';
+import { memo } from 'react';
+
+function CardsBase({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "my-6 grid gap-4 sm:grid-cols-2", children });
+}
+const Cards = memo(CardsBase);
+function CardBase({ title, description, href, icon }) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "mb-3 text-muted", children: icon }),
+    /* @__PURE__ */ jsx("h3", { className: "font-medium text-fg", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted", children: description })
+  ] });
+  const className = "block rounded-lg border border-line p-4 transition-colors hover:border-fg/20 hover:bg-fg/[0.02]";
+  if (href) {
+    return /* @__PURE__ */ jsx(Link, { href, className, children: content });
+  }
+  return /* @__PURE__ */ jsx("div", { className, children: content });
+}
+const Card = memo(CardBase);
+
+export { Card, Cards };

package/dist/components/changelog.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Props for a single release entry in the changelog
+ */
+interface ReleaseProps {
+    version: string;
+    date?: string;
+    datetime?: string;
+    children: ReactNode;
+}
+declare const Release: react.NamedExoticComponent<ReleaseProps>;
+/**
+ * Type of change in a changelog entry
+ */
+type ChangeType = "added" | "changed" | "fixed" | "removed" | "deprecated" | "security";
+/**
+ * Props for a single change item within a release
+ */
+interface ChangeProps {
+    type: ChangeType;
+    children: ReactNode;
+}
+declare const Change: react.NamedExoticComponent<ChangeProps>;
+/**
+ * Props for the changelog container component
+ */
+interface ChangelogProps {
+    children: ReactNode;
+}
+declare const Changelog: react.NamedExoticComponent<ChangelogProps>;
+
+export { Change, type ChangeProps, type ChangeType, Changelog, type ChangelogProps, Release, type ReleaseProps };

package/dist/components/changelog.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const Release = memo(function Release2({
+  version,
+  date,
+  datetime,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("article", { className: "relative pl-6 pb-8 border-l border-line last:pb-0", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute left-0 top-0 w-3 h-3 -translate-x-1/2 rounded-full bg-accent border-2 border-bg",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs("header", { className: "flex items-baseline gap-3 mb-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-fg", children: version }),
+      date && /* @__PURE__ */ jsx("time", { dateTime: datetime ?? date, className: "text-sm text-muted", children: date })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "space-y-2 list-none p-0 m-0", children })
+  ] });
+});
+const typeStyles = {
+  added: { bg: "bg-emerald-500/10", text: "text-emerald-400", label: "added" },
+  changed: { bg: "bg-blue-500/10", text: "text-blue-400", label: "changed" },
+  fixed: { bg: "bg-amber-500/10", text: "text-amber-400", label: "fixed" },
+  removed: { bg: "bg-red-500/10", text: "text-red-400", label: "removed" },
+  deprecated: { bg: "bg-orange-500/10", text: "text-orange-400", label: "deprecated" },
+  security: { bg: "bg-purple-500/10", text: "text-purple-400", label: "security" }
+};
+const Change = memo(function Change2({ type, children }) {
+  const style = typeStyles[type];
+  return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `shrink-0 px-1.5 py-0.5 rounded text-[10px] uppercase tracking-wider font-medium ${style.bg} ${style.text}`,
+        children: style.label
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-muted", children })
+  ] });
+});
+const Changelog = memo(function Changelog2({ children }) {
+  return /* @__PURE__ */ jsx("section", { className: "my-8", children });
+});
+
+export { Change, Changelog, Release };

package/dist/components/checkbox.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode, JSX } from 'react';
+
+/**
+ * Available checkbox sizes
+ */
+type CheckboxSize = "sm" | "md" | "lg";
+/**
+ * Props for the Checkbox component
+ * @property label - Accessible label text displayed next to the checkbox
+ * @property size - Visual size of the checkbox (sm, md, lg)
+ * @property indeterminate - When true, displays the indeterminate state
+ * @property error - Error message displayed below the checkbox
+ * @property tooltip - Help text shown on hover via info icon
+ */
+interface CheckboxProps extends Omit<ComponentPropsWithoutRef<"input">, "type" | "size"> {
+    label?: ReactNode;
+    size?: CheckboxSize;
+    indeterminate?: boolean;
+    error?: ReactNode;
+    tooltip?: ReactNode;
+}
+declare function CheckboxInner({ label, size, indeterminate, error, tooltip, className, id, disabled, "aria-label": ariaLabel, ...props }: CheckboxProps): JSX.Element;
+declare const Checkbox: react.MemoExoticComponent<typeof CheckboxInner>;
+
+export { Checkbox, type CheckboxProps, type CheckboxSize };

package/dist/components/checkbox.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useRef, useId, useEffect } from 'react';
+import { ErrorMessage } from './errormessage';
+import { Tooltip } from './tooltip';
+
+const sizes = {
+  sm: { box: "h-3.5 w-3.5", label: "text-xs" },
+  md: { box: "h-4 w-4", label: "text-sm" },
+  lg: { box: "h-5 w-5", label: "text-base" }
+};
+function CheckboxInner({
+  label,
+  size = "md",
+  indeterminate = false,
+  error,
+  tooltip,
+  className = "",
+  id,
+  disabled,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const ref = useRef(null);
+  const generatedId = useId();
+  const checkboxId = id || generatedId;
+  const errorId = error ? `${checkboxId}-error` : void 0;
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", role: "group", children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: checkboxId,
+        className: `inline-flex items-center gap-2 ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              id: checkboxId,
+              disabled,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": errorId,
+              "aria-label": !label ? ariaLabel : void 0,
+              "aria-checked": indeterminate ? "mixed" : void 0,
+              className: `${sizes[size].box} cursor-pointer rounded border border-line bg-surface text-accent accent-accent focus:outline-none focus:ring-2 focus:ring-accent/50 focus:ring-offset-1 focus:ring-offset-bg disabled:cursor-not-allowed disabled:opacity-50 ${className}`.trim(),
+              ...props
+            }
+          ),
+          label && /* @__PURE__ */ jsxs("span", { className: `${sizes[size].label} text-fg flex items-center gap-1.5`, 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" })
+                ]
+              }
+            ) })
+          ] })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx(ErrorMessage, { id: errorId, children: error })
+  ] });
+}
+const Checkbox = memo(CheckboxInner);
+
+export { Checkbox };

package/dist/components/code.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { ReactNode, JSX } from 'react';
+
+/**
+ * Props for inline code highlighting.
+ * @property children - code text content
+ * @property color - semantic highlight color
+ */
+interface CodeProps {
+    children: ReactNode;
+    color?: "default" | "green" | "red" | "yellow" | "blue";
+}
+/**
+ * Props for preformatted code blocks.
+ * @property children - code block content
+ * @property className - additional css classes
+ */
+interface PreProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function CodeComponent({ children, color }: CodeProps): JSX.Element;
+declare function PreComponent({ children, className }: PreProps): JSX.Element;
+declare const Code: react.MemoExoticComponent<typeof CodeComponent>;
+declare const Pre: react.MemoExoticComponent<typeof PreComponent>;
+
+export { Code, type CodeProps, Pre, type PreProps };

package/dist/components/code.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const colors = {
+  default: "bg-surface text-fg",
+  green: "bg-green-500/10 text-green-300",
+  red: "bg-red-500/10 text-red-300",
+  yellow: "bg-yellow-500/10 text-yellow-300",
+  blue: "bg-blue-500/10 text-blue-300"
+};
+function CodeComponent({ children, color = "default" }) {
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      className: `rounded px-1.5 py-0.5 font-mono text-sm ${colors[color]}`,
+      role: "code",
+      children
+    }
+  );
+}
+function PreComponent({ children, className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "pre",
+    {
+      className: `overflow-x-auto rounded-lg border border-line bg-surface p-4 text-sm ${className}`,
+      role: "region",
+      "aria-label": "code block",
+      tabIndex: 0,
+      children
+    }
+  );
+}
+const Code = memo(CodeComponent);
+const Pre = memo(PreComponent);
+
+export { Code, Pre };

package/dist/components/codeblock.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface CodeBlockProps {
+    children: ReactNode;
+    lang?: string;
+    title?: string;
+    lines?: boolean;
+}
+declare const CodeBlock: react.NamedExoticComponent<CodeBlockProps>;
+
+export { CodeBlock, type CodeBlockProps };