fromsrc 0.0.0 → 0.0.2

package/dist/components/dropdown.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useId, useCallback } from 'react';
+import { getNextIndex } from '../hooks/arrownav';
+import { useClickOutside } from '../hooks/clickoutside';
+
+function Dropdown({ trigger, items, align = "start" }) {
+  const [open, setOpen] = useState(false);
+  const [index, setIndex] = useState(-1);
+  const ref = useRef(null);
+  const triggerRef = useRef(null);
+  const id = useId();
+  const selectableItems = items.filter((i) => i !== "separator" && !i.disabled);
+  const close = useCallback(() => {
+    setOpen(false);
+    setIndex(-1);
+  }, []);
+  useClickOutside(ref, close, open);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!open) {
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+          setOpen(true);
+          setIndex(0);
+          e.preventDefault();
+        }
+        return;
+      }
+      switch (e.key) {
+        case "Escape":
+          close();
+          triggerRef.current?.focus();
+          e.preventDefault();
+          break;
+        case "Tab":
+          close();
+          break;
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Home":
+        case "End": {
+          const next = getNextIndex(e.key, {
+            count: selectableItems.length,
+            current: index,
+            wrap: false
+          });
+          if (next !== index) setIndex(next);
+          e.preventDefault();
+          break;
+        }
+        case "Enter":
+        case " ":
+          if (index >= 0) {
+            selectableItems[index]?.onClick?.();
+            close();
+            triggerRef.current?.focus();
+          }
+          e.preventDefault();
+          break;
+      }
+    },
+    [open, index, selectableItems, close]
+  );
+  const menuId = `${id}-menu`;
+  const getItemId = useCallback((itemIndex) => `${id}-item-${itemIndex}`, [id]);
+  const handleTriggerClick = useCallback(() => {
+    setOpen((prev) => !prev);
+  }, []);
+  const handleItemClick = useCallback(
+    (item) => {
+      if (item.disabled) return;
+      item.onClick?.();
+      close();
+      triggerRef.current?.focus();
+    },
+    [close]
+  );
+  const handleItemHover = useCallback((item, selectableIndex) => {
+    if (!item.disabled) setIndex(selectableIndex);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative inline-block", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleTriggerClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+        role: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        "aria-activedescendant": open && index >= 0 ? getItemId(index) : void 0,
+        children: trigger
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: menuId,
+        role: "menu",
+        "aria-orientation": "vertical",
+        className: `absolute z-50 mt-1 min-w-[160px] rounded-lg border border-line bg-bg p-1 shadow-lg ${align === "end" ? "right-0" : "left-0"}`,
+        children: items.map((item, i) => {
+          if (item === "separator") {
+            return /* @__PURE__ */ jsx("div", { role: "separator", className: "my-1 h-px bg-line" }, i);
+          }
+          const selectableIndex = selectableItems.indexOf(item);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              id: getItemId(selectableIndex),
+              type: "button",
+              role: "menuitem",
+              tabIndex: -1,
+              disabled: item.disabled,
+              "aria-disabled": item.disabled,
+              onClick: () => handleItemClick(item),
+              onMouseEnter: () => handleItemHover(item, selectableIndex),
+              className: `flex w-full items-center gap-2 rounded px-3 py-1.5 text-sm transition-colors ${item.disabled ? "cursor-not-allowed text-muted/50" : item.danger ? selectableIndex === index ? "bg-red-500/10 text-red-400" : "text-red-400 hover:bg-red-500/10" : selectableIndex === index ? "bg-surface text-fg" : "text-muted hover:bg-surface hover:text-fg"}`,
+              children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
+                /* @__PURE__ */ jsx("span", { children: item.label })
+              ]
+            },
+            i
+          );
+        })
+      }
+    )
+  ] });
+}
+
+export { Dropdown };

package/dist/components/dynamiccode.d.ts

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

package/dist/components/dynamiccode.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo, useState, useRef, useEffect } from 'react';
+import { CodeBlock } from './codeblock';
+
+async function highlight(code, lang, theme) {
+  const { codeToHtml } = await import('shiki');
+  return codeToHtml(code, {
+    lang,
+    theme,
+    structure: "inline"
+  });
+}
+const DynamicCode = memo(function DynamicCode2({
+  code,
+  lang = "text",
+  title,
+  lines,
+  theme = "github-dark-default"
+}) {
+  const [html, setHtml] = useState(null);
+  const prevCode = useRef(code);
+  const prevLang = useRef(lang);
+  useEffect(() => {
+    let cancelled = false;
+    if (code !== prevCode.current || lang !== prevLang.current || !html) {
+      prevCode.current = code;
+      prevLang.current = lang;
+      highlight(code, lang, theme).then((result) => {
+        if (!cancelled) setHtml(result);
+      });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [code, lang, theme, html]);
+  return /* @__PURE__ */ jsx(CodeBlock, { lang, title, lines, children: html ? /* @__PURE__ */ jsx("code", { dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx("code", { children: code }) });
+});
+
+export { DynamicCode };

package/dist/components/editlink.d.ts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+interface EditLinkProps {
+    repo: string;
+    path: string;
+    branch?: string;
+    label?: string;
+    className?: string;
+    provider?: "github" | "gitlab" | "bitbucket";
+}
+declare function EditLinkBase({ repo, path, branch, label, className, provider, }: EditLinkProps): JSX.Element;
+declare const EditLink: react.MemoExoticComponent<typeof EditLinkBase>;
+
+export { EditLink, type EditLinkProps };

package/dist/components/editlink.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+function buildUrl(repo, path, branch, provider) {
+  const [, org, name] = repo.split("/");
+  if (provider === "gitlab") return `https://gitlab.com/${org}/${name}/-/edit/${branch}/${path}`;
+  if (provider === "bitbucket")
+    return `https://bitbucket.org/${org}/${name}/src/${branch}/${path}?mode=edit`;
+  return `https://github.com/${org}/${name}/edit/${branch}/${path}`;
+}
+function EditLinkBase({
+  repo,
+  path,
+  branch = "main",
+  label = "Edit this page",
+  className,
+  provider = "github"
+}) {
+  const href = buildUrl(repo, path, branch, provider);
+  return /* @__PURE__ */ jsxs("a", { href, target: "_blank", rel: "noopener noreferrer", className, children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        width: 14,
+        height: 14,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
+          /* @__PURE__ */ jsx("path", { d: "m15 5 4 4" })
+        ]
+      }
+    ),
+    label
+  ] });
+}
+const EditLink = memo(EditLinkBase);
+
+export { EditLink };

package/dist/components/embed.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+
+/**
+ * Props for the YouTube embed component
+ */
+interface YouTubeProps {
+    id: string;
+    title?: string;
+}
+declare const YouTube: react.NamedExoticComponent<YouTubeProps>;
+/**
+ * Props for the CodeSandbox embed component
+ */
+interface CodeSandboxProps {
+    id: string;
+    title?: string;
+}
+declare const CodeSandbox: react.NamedExoticComponent<CodeSandboxProps>;
+/**
+ * Props for the StackBlitz embed component
+ */
+interface StackBlitzProps {
+    id: string;
+    file?: string;
+    title?: string;
+}
+declare const StackBlitz: react.NamedExoticComponent<StackBlitzProps>;
+/**
+ * Props for the Tweet embed component
+ */
+interface TweetProps {
+    id: string;
+}
+declare const Tweet: react.NamedExoticComponent<TweetProps>;
+/**
+ * Props for the GitHub Gist embed component
+ */
+interface GistProps {
+    id: string;
+    file?: string;
+    title?: string;
+}
+declare const Gist: react.NamedExoticComponent<GistProps>;
+
+export { CodeSandbox, type CodeSandboxProps, Gist, type GistProps, StackBlitz, type StackBlitzProps, Tweet, type TweetProps, YouTube, type YouTubeProps };

package/dist/components/embed.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const YouTube = memo(function YouTube2({
+  id,
+  title = "YouTube video"
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "my-6 rounded-xl border border-line overflow-hidden aspect-video", children: /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src: `https://www.youtube.com/embed/${id}`,
+      title,
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+      allowFullScreen: true,
+      className: "w-full h-full",
+      loading: "lazy",
+      "aria-label": title
+    }
+  ) });
+});
+const CodeSandbox = memo(function CodeSandbox2({
+  id,
+  title = "CodeSandbox"
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "my-6 rounded-xl border border-line overflow-hidden h-[300px] sm:h-[400px] md:h-[500px]", children: /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src: `https://codesandbox.io/embed/${id}?fontsize=14&hidenavigation=1&theme=dark`,
+      title,
+      allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",
+      sandbox: "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts",
+      className: "w-full h-full",
+      loading: "lazy",
+      "aria-label": title
+    }
+  ) });
+});
+const StackBlitz = memo(function StackBlitz2({
+  id,
+  file,
+  title = "StackBlitz"
+}) {
+  const fileParam = file ? `&file=${encodeURIComponent(file)}` : "";
+  return /* @__PURE__ */ jsx("div", { className: "my-6 rounded-xl border border-line overflow-hidden h-[300px] sm:h-[400px] md:h-[500px]", children: /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src: `https://stackblitz.com/edit/${id}?embed=1&theme=dark${fileParam}`,
+      title,
+      className: "w-full h-full",
+      loading: "lazy",
+      "aria-label": title
+    }
+  ) });
+});
+const Tweet = memo(function Tweet2({ id }) {
+  return /* @__PURE__ */ jsx("div", { className: "my-6 flex justify-center", role: "region", "aria-label": "Embedded tweet", children: /* @__PURE__ */ jsx("blockquote", { className: "twitter-tweet", "data-theme": "dark", children: /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: `https://twitter.com/x/status/${id}`,
+      rel: "noopener noreferrer",
+      target: "_blank",
+      children: "Loading tweet..."
+    }
+  ) }) });
+});
+const Gist = memo(function Gist2({
+  id,
+  file,
+  title = "GitHub Gist"
+}) {
+  const fileParam = file ? `?file=${encodeURIComponent(file)}` : "";
+  return /* @__PURE__ */ jsx("div", { className: "my-6 rounded-xl border border-line overflow-hidden", children: /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src: `https://gist.github.com/${id}.pibb${fileParam}`,
+      className: "w-full min-h-[200px] sm:min-h-[250px] md:min-h-[300px]",
+      title,
+      loading: "lazy",
+      "aria-label": title
+    }
+  ) });
+});
+
+export { CodeSandbox, Gist, StackBlitz, Tweet, YouTube };

package/dist/components/endpoint.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { ReactNode, JSX } from 'react';
+
+/**
+ * HTTP methods supported by the endpoint component
+ */
+type Method = "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS" | "TRACE";
+/**
+ * Props for the Endpoint component
+ */
+interface EndpointProps {
+    /** HTTP method for the endpoint */
+    method: Method;
+    /** URL path for the endpoint */
+    path: string;
+    /** Description of what the endpoint does */
+    description?: string;
+    /** Child content such as parameters and responses */
+    children?: ReactNode;
+}
+declare function EndpointBase({ method, path, description, children }: EndpointProps): JSX.Element;
+declare const Endpoint: react.MemoExoticComponent<typeof EndpointBase>;
+/**
+ * Props for the Param component
+ */
+interface ParamProps {
+    /** Parameter name */
+    name: string;
+    /** Parameter type */
+    type: string;
+    /** Whether the parameter is required */
+    required?: boolean;
+    /** Description of the parameter */
+    description?: string;
+    /** Additional content */
+    children?: ReactNode;
+}
+declare function ParamBase({ name, type, required, description, children }: ParamProps): JSX.Element;
+declare const Param: react.MemoExoticComponent<typeof ParamBase>;
+/**
+ * Valid HTTP status codes
+ */
+type HttpStatus = 100 | 101 | 102 | 103 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 226 | 300 | 301 | 302 | 303 | 304 | 305 | 307 | 308 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 421 | 422 | 423 | 424 | 425 | 426 | 428 | 429 | 431 | 451 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 510 | 511;
+/**
+ * Props for the Response component
+ */
+interface ResponseProps {
+    /** HTTP status code */
+    status: HttpStatus | string;
+    /** Description of the response */
+    description?: string;
+    /** Response body content */
+    children?: ReactNode;
+}
+declare function ResponseBase({ status, description, children }: ResponseProps): JSX.Element;
+declare const Response: react.MemoExoticComponent<typeof ResponseBase>;
+
+export { Endpoint, type EndpointProps, type Method, Param, type ParamProps, Response, type ResponseProps };

package/dist/components/endpoint.js

@@ -0,0 +1,100 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const methodColors = {
+  GET: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
+  POST: "bg-blue-500/10 text-blue-400 border-blue-500/20",
+  PUT: "bg-amber-500/10 text-amber-400 border-amber-500/20",
+  PATCH: "bg-orange-500/10 text-orange-400 border-orange-500/20",
+  DELETE: "bg-red-500/10 text-red-400 border-red-500/20",
+  HEAD: "bg-cyan-500/10 text-cyan-400 border-cyan-500/20",
+  OPTIONS: "bg-violet-500/10 text-violet-400 border-violet-500/20",
+  TRACE: "bg-pink-500/10 text-pink-400 border-pink-500/20"
+};
+function EndpointBase({ method, path, description, children }) {
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: "my-6 rounded-lg border border-line overflow-hidden",
+      "aria-labelledby": `endpoint-${method}-${path.replace(/\//g, "-")}`,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center gap-3 px-4 py-3 bg-surface/50 border-b border-line", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `px-2 py-0.5 text-xs font-mono font-medium rounded border ${methodColors[method]}`,
+              role: "text",
+              "aria-label": `${method} method`,
+              children: method
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "code",
+            {
+              id: `endpoint-${method}-${path.replace(/\//g, "-")}`,
+              className: "text-sm font-mono text-fg",
+              children: path
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "px-4 py-3 text-sm text-muted border-b border-line", children: description }),
+        children && /* @__PURE__ */ jsx("section", { className: "p-4", "aria-label": "Endpoint details", children })
+      ]
+    }
+  );
+}
+const Endpoint = memo(EndpointBase);
+function ParamBase({ name, type, required, description, children }) {
+  const paramId = `param-${name}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "py-3 border-b border-line last:border-0",
+      role: "listitem",
+      "aria-labelledby": paramId,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+          /* @__PURE__ */ jsx("code", { id: paramId, className: "text-sm font-mono text-fg", children: name }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted", "aria-label": `type ${type}`, children: type }),
+          required && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-[10px] text-red-400 uppercase tracking-wider",
+              role: "status",
+              "aria-label": "required parameter",
+              children: "required"
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted", id: `${paramId}-desc`, children: description }),
+        children
+      ]
+    }
+  );
+}
+const Param = memo(ParamBase);
+function ResponseBase({ status, description, children }) {
+  const number = typeof status === "string" ? Number(status) : status;
+  const isSuccess = Number.isFinite(number) && number >= 200 && number < 300;
+  const isError = Number.isFinite(number) && number >= 400;
+  const statusLabel = isSuccess ? "success" : isError ? "error" : "redirect";
+  return /* @__PURE__ */ jsxs("section", { className: "my-4", "aria-labelledby": `response-${status}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: `response-${status}`,
+          className: `px-1.5 py-0.5 text-xs font-mono rounded ${isSuccess ? "bg-emerald-500/10 text-emerald-400" : isError ? "bg-red-500/10 text-red-400" : "bg-amber-500/10 text-amber-400"}`,
+          role: "status",
+          "aria-label": `HTTP ${status} ${statusLabel}`,
+          children: status
+        }
+      ),
+      description && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted", children: description })
+    ] }),
+    children
+  ] });
+}
+const Response = memo(ResponseBase);
+
+export { Endpoint, Param, Response };

package/dist/components/errormessage.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ErrorMessageProps {
+    id?: string;
+    children: ReactNode;
+}
+declare function ErrorMessageInner({ id, children }: ErrorMessageProps): React.ReactElement;
+declare const ErrorMessage: react.MemoExoticComponent<typeof ErrorMessageInner>;
+
+export { ErrorMessage, type ErrorMessageProps };

package/dist/components/errormessage.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+function ErrorMessageInner({ id, children }) {
+  return /* @__PURE__ */ jsx("span", { id, className: "text-xs text-red-400", role: "alert", children });
+}
+const ErrorMessage = memo(ErrorMessageInner);
+
+export { ErrorMessage };

package/dist/components/expandcode.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ExpandCodeProps {
+    children: ReactNode;
+    maxLines?: number;
+    defaultOpen?: boolean;
+}
+declare function ExpandCodeComponent({ children, maxLines, defaultOpen }: ExpandCodeProps): react_jsx_runtime.JSX.Element;
+declare const ExpandCode: react.MemoExoticComponent<typeof ExpandCodeComponent>;
+
+export { ExpandCode, type ExpandCodeProps };

package/dist/components/expandcode.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useRef, useState, useEffect } from 'react';
+
+const LINE_HEIGHT = 20.8;
+function ExpandCodeComponent({ children, maxLines = 15, defaultOpen = false }) {
+  const contentRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [needsExpand, setNeedsExpand] = useState(false);
+  const [collapsedHeight, setCollapsedHeight] = useState(0);
+  useEffect(() => {
+    if (contentRef.current) {
+      const scrollHeight = contentRef.current.scrollHeight;
+      const maxHeight = maxLines * LINE_HEIGHT;
+      if (scrollHeight > maxHeight) {
+        setNeedsExpand(true);
+        setCollapsedHeight(maxHeight);
+      }
+    }
+  }, [maxLines]);
+  const shouldCollapse = needsExpand && !isOpen;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: contentRef,
+        style: {
+          maxHeight: shouldCollapse ? `${collapsedHeight}px` : void 0,
+          overflow: shouldCollapse ? "hidden" : void 0,
+          transition: "max-height 0.3s ease"
+        },
+        children
+      }
+    ),
+    shouldCollapse && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute bottom-0 left-0 right-0 h-24 pointer-events-none",
+        style: {
+          background: "linear-gradient(transparent, #0d0d0d)"
+        }
+      }
+    ),
+    needsExpand && /* @__PURE__ */ jsx("div", { className: "flex justify-center mt-2", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(!isOpen),
+        "aria-expanded": isOpen,
+        className: "text-sm text-neutral-400 hover:text-neutral-200 transition-colors",
+        children: isOpen ? "Show less" : "Show more"
+      }
+    ) })
+  ] });
+}
+const ExpandCode = memo(ExpandCodeComponent);
+
+export { ExpandCode };

package/dist/components/feature.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Props for the Feature component
+ */
+interface FeatureProps {
+    icon?: ReactNode;
+    title: string;
+    children: ReactNode;
+}
+declare const Feature: react.NamedExoticComponent<FeatureProps>;
+/**
+ * Props for the Features container component
+ */
+interface FeaturesProps {
+    children: ReactNode;
+    columns?: 2 | 3;
+}
+declare const Features: react.NamedExoticComponent<FeaturesProps>;
+/**
+ * Props for the FeatureCard component
+ */
+interface FeatureCardProps {
+    icon?: ReactNode;
+    title: string;
+    children: ReactNode;
+}
+declare const FeatureCard: react.NamedExoticComponent<FeatureCardProps>;
+
+export { Feature, FeatureCard, type FeatureCardProps, type FeatureProps, Features, type FeaturesProps };