fromsrc 0.0.0 → 0.0.2

package/dist/components/quote.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Image from 'next/image';
+import { memo } from 'react';
+
+function QuoteBase({ children, author, role, avatar }) {
+  return /* @__PURE__ */ jsxs("figure", { className: "my-6 p-6 rounded-xl border border-line bg-surface/30", children: [
+    /* @__PURE__ */ jsxs("blockquote", { className: "text-lg text-fg italic leading-relaxed", children: [
+      '"',
+      children,
+      '"'
+    ] }),
+    author && /* @__PURE__ */ jsxs("figcaption", { className: "mt-4 flex items-center gap-3", children: [
+      avatar && /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full overflow-hidden relative", children: /* @__PURE__ */ jsx(Image, { src: avatar, alt: "", fill: true, className: "object-cover", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("cite", { className: "text-sm font-medium text-fg not-italic", children: author }),
+        role && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: role })
+      ] })
+    ] })
+  ] });
+}
+const Quote = memo(QuoteBase);
+function TestimonialsBase({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 my-6", children });
+}
+const Testimonials = memo(TestimonialsBase);
+function TestimonialBase({ children, author, role, avatar }) {
+  return /* @__PURE__ */ jsxs("figure", { className: "p-5 rounded-xl border border-line bg-surface/30", children: [
+    /* @__PURE__ */ jsx("blockquote", { className: "text-sm text-muted leading-relaxed", children }),
+    /* @__PURE__ */ jsxs("figcaption", { className: "mt-4 flex items-center gap-3", children: [
+      avatar && /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full overflow-hidden relative", children: /* @__PURE__ */ jsx(Image, { src: avatar, alt: "", fill: true, className: "object-cover", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("cite", { className: "text-sm font-medium text-fg not-italic", children: author }),
+        role && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: role })
+      ] })
+    ] })
+  ] });
+}
+const Testimonial = memo(TestimonialBase);
+
+export { Quote, Testimonial, Testimonials };

package/dist/components/radio.d.ts

@@ -0,0 +1,48 @@
+import * as react from 'react';
+import { ReactNode, JSX } from 'react';
+
+type RadioSize = "sm" | "md" | "lg";
+/**
+ * Props for individual radio button within a RadioGroup.
+ */
+interface RadioProps {
+    /** Unique value identifying this radio option */
+    value: string;
+    /** Accessible label displayed next to the radio */
+    label?: ReactNode;
+    /** Disables this specific radio button */
+    disabled?: boolean;
+    /** Additional CSS classes for the radio button */
+    className?: string;
+}
+/**
+ * Props for the RadioGroup container that manages radio state.
+ */
+interface RadioGroupProps {
+    /** Currently selected value (controlled mode) */
+    value?: string;
+    /** Initial value (uncontrolled mode) */
+    defaultValue?: string;
+    /** Callback fired when selection changes */
+    onChange?: (value: string) => void;
+    /** Form field name attribute */
+    name?: string;
+    /** Size variant for all radios in group */
+    size?: RadioSize;
+    /** Accessible label for the radio group */
+    label?: string;
+    /** Layout direction of radio options */
+    orientation?: "horizontal" | "vertical";
+    /** Disables all radios in the group */
+    disabled?: boolean;
+    /** Radio components to render */
+    children: ReactNode;
+    /** Additional CSS classes for the group container */
+    className?: string;
+}
+declare function RadioBase({ value, label, disabled: localDisabled, className, }: RadioProps): JSX.Element;
+declare const Radio: react.MemoExoticComponent<typeof RadioBase>;
+declare function RadioGroupBase({ value: controlledValue, defaultValue, onChange, name, size, label, orientation, disabled, children, className, }: RadioGroupProps): JSX.Element;
+declare const RadioGroup: react.MemoExoticComponent<typeof RadioGroupBase>;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize };

package/dist/components/radio.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, memo, useContext, useId, useState } from 'react';
+import { getNextIndex } from '../hooks/arrownav';
+
+const RadioContext = createContext(null);
+const sizes = {
+  sm: { radio: "h-3.5 w-3.5", label: "text-xs" },
+  md: { radio: "h-4 w-4", label: "text-sm" },
+  lg: { radio: "h-5 w-5", label: "text-base" }
+};
+const dotSizes = {
+  sm: "h-1.5 w-1.5",
+  md: "h-2 w-2",
+  lg: "h-2.5 w-2.5"
+};
+function RadioBase({
+  value,
+  label,
+  disabled: localDisabled,
+  className = ""
+}) {
+  const ctx = useContext(RadioContext);
+  if (!ctx) throw new Error("Radio must be used within RadioGroup");
+  const id = useId();
+  const checked = ctx.value === value;
+  const disabled = localDisabled || ctx.disabled;
+  const handleClick = () => {
+    if (!disabled) ctx.onChange(value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      if (!disabled) ctx.onChange(value);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", "data-radio-value": value, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        id,
+        "aria-checked": checked,
+        "aria-disabled": disabled,
+        "aria-labelledby": label ? `${id}-label` : void 0,
+        disabled,
+        tabIndex: checked ? 0 : -1,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        className: `
+					relative inline-flex items-center justify-center rounded-full
+					border border-line bg-surface
+					focus-visible:outline-none 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
+					${checked ? "border-accent" : ""}
+					${sizes[ctx.size].radio}
+					${className}
+				`.trim(),
+        children: checked && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `rounded-full bg-accent ${dotSizes[ctx.size]}` })
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        id: `${id}-label`,
+        htmlFor: id,
+        className: `${sizes[ctx.size].label} text-fg select-none ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+        onClick: handleClick,
+        children: label
+      }
+    )
+  ] });
+}
+const Radio = memo(RadioBase);
+function RadioGroupBase({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  name,
+  size = "md",
+  label,
+  orientation = "vertical",
+  disabled = false,
+  children,
+  className = ""
+}) {
+  const generatedName = useId();
+  const groupId = useId();
+  const groupName = name || generatedName;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const handleChange = (newValue) => {
+    if (!isControlled) setInternalValue(newValue);
+    onChange?.(newValue);
+  };
+  const handleKeyDown = (e) => {
+    const radios = Array.from(
+      e.currentTarget.querySelectorAll('[role="radio"]:not([disabled])')
+    );
+    const currentIndex = radios.findIndex((r) => r === document.activeElement);
+    const nextIndex = getNextIndex(e.key, {
+      count: radios.length,
+      current: currentIndex >= 0 ? currentIndex : 0,
+      direction: "both",
+      wrap: true
+    });
+    if (nextIndex === currentIndex) return;
+    e.preventDefault();
+    const nextRadio = radios[nextIndex];
+    if (nextRadio) {
+      nextRadio.focus();
+      const wrapper = nextRadio.closest("[data-radio-value]");
+      const radioValue = wrapper?.getAttribute("data-radio-value");
+      if (radioValue) handleChange(radioValue);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    RadioContext.Provider,
+    {
+      value: { name: groupName, value, size, disabled, onChange: handleChange },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-label": label,
+          "aria-describedby": label ? `${groupId}-desc` : void 0,
+          "aria-orientation": orientation,
+          onKeyDown: handleKeyDown,
+          className: `flex ${orientation === "horizontal" ? "flex-row gap-4" : "flex-col gap-2"} ${className}`.trim(),
+          children
+        }
+      )
+    }
+  );
+}
+const RadioGroup = memo(RadioGroupBase);
+
+export { Radio, RadioGroup };

package/dist/components/rating.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ReactElement } from 'react';
+
+/**
+ * Props for the Rating component
+ */
+interface RatingProps {
+    /** Current rating value (1-based) */
+    value?: number;
+    /** Maximum number of stars */
+    max?: number;
+    /** Callback when rating changes */
+    onChange?: (value: number) => void;
+    /** Whether the rating is read-only */
+    readonly?: boolean;
+    /** Accessible label for the rating group */
+    label?: string;
+}
+declare function RatingBase({ value, max, onChange, readonly, label, }: RatingProps): ReactElement;
+declare const Rating: react.MemoExoticComponent<typeof RatingBase>;
+
+export { Rating, type RatingProps };

package/dist/components/rating.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo, useState, useRef, useCallback } from 'react';
+import { getNextIndex } from '../hooks/arrownav';
+import { IconStar } from './icons';
+
+function RatingBase({
+  value = 0,
+  max = 5,
+  onChange,
+  readonly = false,
+  label = "Rating"
+}) {
+  const [hover, setHover] = useState(null);
+  const [focus, setFocus] = useState(value > 0 ? value - 1 : 0);
+  const refs = useRef([]);
+  const display = hover ?? value;
+  const handleClick = useCallback(
+    (index) => {
+      onChange?.(index);
+    },
+    [onChange]
+  );
+  const handleFocus = useCallback((index) => {
+    setFocus(index);
+  }, []);
+  const handleMouseEnter = useCallback(
+    (index) => {
+      if (!readonly) {
+        setHover(index);
+      }
+    },
+    [readonly]
+  );
+  const handleMouseLeave = useCallback(() => {
+    setHover(null);
+  }, []);
+  const handleKeyDown = useCallback(
+    (e, index) => {
+      if (readonly) return;
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        onChange?.(index + 1);
+        return;
+      }
+      const next = getNextIndex(e.key, {
+        count: max,
+        current: index,
+        direction: "both",
+        wrap: true
+      });
+      if (next === index) return;
+      e.preventDefault();
+      setFocus(next);
+      refs.current[next]?.focus();
+    },
+    [readonly, max, onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex gap-0.5",
+      role: "radiogroup",
+      "aria-label": label,
+      "aria-readonly": readonly,
+      children: Array.from({ length: max }, (_, i) => {
+        const filled = i < display;
+        const index = i + 1;
+        const checked = value === index;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: (el) => {
+              refs.current[i] = el;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": checked,
+            "aria-label": `Rate ${index} out of ${max} stars`,
+            "aria-posinset": index,
+            "aria-setsize": max,
+            disabled: readonly,
+            tabIndex: readonly ? -1 : focus === i ? 0 : -1,
+            onClick: () => handleClick(index),
+            onKeyDown: (e) => handleKeyDown(e, i),
+            onFocus: () => handleFocus(i),
+            onMouseEnter: () => handleMouseEnter(index),
+            onMouseLeave: handleMouseLeave,
+            className: `transition-colors ${readonly ? "cursor-default" : "cursor-pointer hover:text-yellow-400"} ${filled ? "text-yellow-400" : "text-muted/30"}`,
+            children: /* @__PURE__ */ jsx(IconStar, { "aria-hidden": "true", size: 20, fill: filled ? "currentColor" : "none" })
+          },
+          i
+        );
+      })
+    }
+  );
+}
+const Rating = memo(RatingBase);
+
+export { Rating };

package/dist/components/readtime.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+export { calcReadTime } from '../readtime.js';
+
+/**
+ * Props for the ReadTime component
+ */
+interface Props {
+    /** markdown or text content to calculate reading time from */
+    content: string;
+    /** words per minute reading speed (default: 200) */
+    wpm?: number;
+    /** additional css classes */
+    className?: string;
+}
+declare const ReadTime: react.NamedExoticComponent<Props>;
+
+export { ReadTime };

package/dist/components/readtime.js

@@ -0,0 +1,26 @@
+import { jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { calcReadTime } from '../readtime';
+export { calcReadTime } from '../readtime';
+
+const ReadTime = memo(function ReadTime2({
+  content,
+  wpm = 200,
+  className
+}) {
+  const minutes = calcReadTime(content, wpm);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `text-dim text-sm ${className || ""}`,
+      role: "text",
+      "aria-label": `Estimated reading time: ${minutes} ${minutes === 1 ? "minute" : "minutes"}`,
+      children: [
+        minutes,
+        " min read"
+      ]
+    }
+  );
+});
+
+export { ReadTime };

package/dist/components/recent.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'react';
+
+interface RecentProps {
+    listId: string;
+    items: string[];
+    selected: number;
+    onSelect: (query: string) => void;
+}
+declare function getRecentOptionId(index: number): string;
+declare function Recent({ listId, items, selected, onSelect }: RecentProps): JSX.Element | null;
+
+export { Recent, type RecentProps, getRecentOptionId };

package/dist/components/recent.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function getRecentOptionId(index) {
+  return `search-recent-option-${index}`;
+}
+function Recent({ listId, items, selected, onSelect }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-[10px] uppercase tracking-wider text-dim", children: "recent" }),
+    /* @__PURE__ */ jsx("ul", { id: listId, role: "listbox", children: items.map((item, index) => /* @__PURE__ */ jsx("li", { id: getRecentOptionId(index), role: "option", "aria-selected": index === selected, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelect(item),
+        className: `w-full text-left px-3 py-2 rounded-lg text-sm transition-colors focus:outline-none focus:ring-1 focus:ring-line ${index === selected ? "bg-bg border border-line text-fg" : "text-muted hover:bg-bg/50"}`,
+        children: item
+      }
+    ) }, item)) })
+  ] });
+}
+
+export { Recent, getRecentOptionId };

package/dist/components/responsive.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Props for the Show component that controls visibility at breakpoints
+ */
+interface ShowProps {
+    above?: "sm" | "md" | "lg" | "xl";
+    below?: "sm" | "md" | "lg" | "xl";
+    children: ReactNode;
+}
+declare const Show: react.NamedExoticComponent<ShowProps>;
+/**
+ * Props for the Grid component that creates responsive grid layouts
+ */
+interface GridProps {
+    cols?: 1 | 2 | 3 | 4;
+    gap?: "sm" | "md" | "lg";
+    children: ReactNode;
+}
+declare const Grid: react.NamedExoticComponent<GridProps>;
+/**
+ * Props for the Flex component that creates flexible box layouts
+ */
+interface FlexProps {
+    direction?: "row" | "col";
+    align?: "start" | "center" | "end" | "stretch";
+    justify?: "start" | "center" | "end" | "between";
+    gap?: "sm" | "md" | "lg";
+    wrap?: boolean;
+    children: ReactNode;
+}
+declare const Flex: react.NamedExoticComponent<FlexProps>;
+
+export { Flex, type FlexProps, Grid, type GridProps, Show, type ShowProps };

package/dist/components/responsive.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const aboveClasses = {
+  sm: "hidden sm:block",
+  md: "hidden md:block",
+  lg: "hidden lg:block",
+  xl: "hidden xl:block"
+};
+const belowClasses = {
+  sm: "sm:hidden",
+  md: "md:hidden",
+  lg: "lg:hidden",
+  xl: "xl:hidden"
+};
+const Show = memo(function Show2({ above, below, children }) {
+  let className = "";
+  if (above) {
+    className = aboveClasses[above];
+  } else if (below) {
+    className = belowClasses[below];
+  }
+  return /* @__PURE__ */ jsx("div", { className, children });
+});
+const colClasses = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 md:grid-cols-2",
+  3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+};
+const gapClasses = {
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6"
+};
+const Grid = memo(function Grid2({ cols = 2, gap = "md", children }) {
+  return /* @__PURE__ */ jsx("div", { className: `grid ${colClasses[cols]} ${gapClasses[gap]} my-6`, children });
+});
+const directionClasses = {
+  row: "flex-row",
+  col: "flex-col"
+};
+const alignClasses = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+const justifyClasses = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+};
+const Flex = memo(function Flex2({
+  direction = "row",
+  align = "start",
+  justify = "start",
+  gap = "md",
+  wrap = false,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `flex ${directionClasses[direction]} ${alignClasses[align]} ${justifyClasses[justify]} ${gapClasses[gap]} ${wrap ? "flex-wrap" : ""} my-4`,
+      children
+    }
+  );
+});
+
+export { Flex, Grid, Show };

package/dist/components/results.d.ts

@@ -0,0 +1,20 @@
+import { RefObject, JSX } from 'react';
+import { SearchResult } from '../search.js';
+import '../content.js';
+import 'zod';
+import '../schema.js';
+import '../searchscore.js';
+
+declare function getOptionId(index: number): string;
+interface ResultsProps {
+    listId: string;
+    results: SearchResult[];
+    selected: number;
+    query: string;
+    listRef: RefObject<HTMLUListElement | null>;
+    onResultClick: (slug: string | undefined, anchor?: string) => void;
+    onResultKeyDown: (e: React.KeyboardEvent, slug: string | undefined, anchor?: string) => void;
+}
+declare function Results({ listId, results, selected, query, listRef, onResultClick, onResultKeyDown, }: ResultsProps): JSX.Element;
+
+export { Results, getOptionId };

package/dist/components/results.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+
+function highlightMatch(text, query) {
+  if (!query.trim()) return text;
+  const words = query.trim().split(/\s+/).filter(Boolean);
+  const escaped = words.map((w) => w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+  const pattern = new RegExp(`(${escaped})`, "gi");
+  const parts = text.split(pattern);
+  if (parts.length === 1) return text;
+  const matcher = new RegExp(`^(?:${escaped})$`, "i");
+  return parts.map(
+    (part, i) => matcher.test(part) ? /* @__PURE__ */ jsx("mark", { className: "bg-transparent text-fg font-medium", children: part }, i) : part
+  );
+}
+function getOptionId(index) {
+  return `search-option-${index}`;
+}
+function groupResults(results) {
+  const map = /* @__PURE__ */ new Map();
+  for (const result of results) {
+    const slug = result.doc.slug || "";
+    const slashIndex = slug.indexOf("/");
+    const category = slashIndex === -1 ? "docs" : slug.slice(0, slashIndex);
+    const existing = map.get(category);
+    if (existing) {
+      existing.push(result);
+    } else {
+      map.set(category, [result]);
+    }
+  }
+  return map;
+}
+function Results({
+  listId,
+  results,
+  selected,
+  query,
+  listRef,
+  onResultClick,
+  onResultKeyDown
+}) {
+  const grouped = useMemo(() => groupResults(results), [results]);
+  let idx = 0;
+  return /* @__PURE__ */ jsx("ul", { ref: listRef, id: listId, role: "listbox", className: "p-2", children: Array.from(grouped.entries()).map(([category, items]) => /* @__PURE__ */ jsxs("li", { role: "presentation", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 pt-2 pb-1 text-[10px] font-medium text-dim uppercase tracking-wider", children: category }),
+    /* @__PURE__ */ jsx("ul", { role: "group", children: items.map((result) => {
+      const i = idx++;
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          id: getOptionId(i),
+          role: "option",
+          "aria-selected": i === selected,
+          onClick: () => onResultClick(result.doc.slug, result.anchor),
+          onKeyDown: (e) => onResultKeyDown(e, result.doc.slug, result.anchor),
+          tabIndex: -1,
+          className: `w-full text-left px-3 py-2 rounded-lg transition-colors cursor-pointer ${i === selected ? "bg-bg border border-line text-fg" : "text-muted hover:bg-bg/50"}`,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm", children: highlightMatch(result.doc.title, query) }),
+            result.heading && /* @__PURE__ */ jsx("div", { className: "text-[11px] text-dim", children: highlightMatch(result.heading, query) }),
+            result.snippet ? /* @__PURE__ */ jsx("div", { className: "text-xs text-dim truncate", children: highlightMatch(result.snippet, query) }) : result.doc.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-dim truncate", children: highlightMatch(result.doc.description, query) })
+          ]
+        },
+        `${result.doc.slug || "index"}::${result.anchor || "page"}::${i}`
+      );
+    }) })
+  ] }, category)) });
+}
+
+export { Results, getOptionId };

package/dist/components/screenshot.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Props for the Screenshot component
+ */
+interface ScreenshotProps {
+    /** Image source path or URL */
+    src: string;
+    /** Alt text for accessibility */
+    alt: string;
+    /** Optional caption displayed below the image */
+    caption?: string;
+    /** Show browser chrome decoration */
+    browser?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const Screenshot: react.NamedExoticComponent<ScreenshotProps>;
+/**
+ * Props for the Frame component
+ */
+interface FrameProps {
+    /** Content to display inside the frame */
+    children: ReactNode;
+    /** Optional title displayed in the frame header */
+    title?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const Frame: react.NamedExoticComponent<FrameProps>;
+
+export { Frame, type FrameProps, Screenshot, type ScreenshotProps };