fromsrc 0.0.0 → 0.0.2

package/dist/components/compare.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const Compare = memo(function Compare2({ children, label }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "my-6 grid gap-3 md:gap-4 md:grid-cols-2",
+      role: "region",
+      "aria-label": label || "comparison",
+      "aria-roledescription": "comparison view",
+      children
+    }
+  );
+});
+const variants = {
+  default: "border-line",
+  good: "border-emerald-500/30 bg-emerald-500/5",
+  bad: "border-red-500/30 bg-red-500/5"
+};
+const titleVariants = {
+  default: "text-fg",
+  good: "text-emerald-400",
+  bad: "text-red-400"
+};
+const Column = memo(function Column2({ title, variant = "default", children }) {
+  const headingId = `column-${title.toLowerCase().replace(/\s+/g, "-")}`;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: `rounded-xl border p-3 md:p-4 ${variants[variant]}`,
+      "aria-labelledby": headingId,
+      children: [
+        /* @__PURE__ */ jsx(
+          "h4",
+          {
+            id: headingId,
+            className: `text-sm font-medium mb-2 md:mb-3 ${titleVariants[variant]}`,
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-muted space-y-2", children })
+      ]
+    }
+  );
+});
+const CompareRow = memo(function CompareRow2({ left, right, leftLabel, rightLabel }) {
+  const leftId = "compare-row-left";
+  const rightId = "compare-row-right";
+  const resolvedLeftLabel = leftLabel || "before";
+  const resolvedRightLabel = rightLabel || "after";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "my-6 grid gap-3 md:gap-4 md:grid-cols-2",
+      role: "region",
+      "aria-label": "before and after comparison",
+      "aria-roledescription": "comparison view",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "section",
+          {
+            className: "rounded-xl border border-red-500/30 bg-red-500/5 p-3 md:p-4",
+            "aria-labelledby": leftId,
+            children: [
+              /* @__PURE__ */ jsx("h4", { id: leftId, className: "text-xs text-red-400 mb-2 font-medium", children: resolvedLeftLabel }),
+              /* @__PURE__ */ jsx("div", { className: "text-sm text-muted", children: left })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "section",
+          {
+            className: "rounded-xl border border-emerald-500/30 bg-emerald-500/5 p-3 md:p-4",
+            "aria-labelledby": rightId,
+            children: [
+              /* @__PURE__ */ jsx("h4", { id: rightId, className: "text-xs text-emerald-400 mb-2 font-medium", children: resolvedRightLabel }),
+              /* @__PURE__ */ jsx("div", { className: "text-sm text-muted", children: right })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+export { Column, Compare, CompareRow };

package/dist/components/content.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+/** props for the content component that renders mdx source */
+interface ContentProps {
+    /** raw mdx source string to compile and render */
+    source: string;
+}
+declare function ContentBase({ source }: ContentProps): JSX.Element;
+declare const Content: react.MemoExoticComponent<typeof ContentBase>;
+
+export { Content, type ContentProps };

package/dist/components/content.js

@@ -0,0 +1,232 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { memo, useState, useEffect, isValidElement } from 'react';
+import { AccordionItem, Accordion } from './accordion';
+import { Badge } from './badge';
+import { Banner } from './banner';
+import { Callout } from './callout';
+import { Card, Cards } from './cards';
+import { CodeBlock } from './codeblock';
+import { CodeTabs, CodeTab, CodeGroup } from './codegroup';
+import { Create } from './create';
+import { Folder, File, Files } from './files';
+import { Github } from './github';
+import { Install } from './install';
+import { Mermaid } from './mermaid';
+import { Step, Steps } from './steps';
+import { Tab, Tabs } from './tabs';
+import { TocInline } from './toc/inline';
+import { Tooltip } from './tooltip';
+import { Twoslash } from './twoslash';
+import { TypeTable } from './typetable';
+import { Video } from './video';
+import { Zoom } from './zoom';
+
+function text(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map((item) => text(item)).join(" ");
+  if (isValidElement(node)) return text(node.props.children);
+  return "";
+}
+function slugify(value) {
+  return value.trim().toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
+}
+function getId(children) {
+  const value = text(children);
+  return value ? slugify(value) : "";
+}
+const components = {
+  h1: (props) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-medium mt-12 mb-4 first:mt-0 text-fg", ...props }),
+  h2: (props) => /* @__PURE__ */ jsx(
+    "h2",
+    {
+      id: getId(props.children),
+      className: "text-lg font-medium mt-10 mb-4 pb-2 border-b border-line scroll-mt-20 text-fg",
+      ...props
+    }
+  ),
+  h3: (props) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      id: getId(props.children),
+      className: "text-base font-medium mt-8 mb-3 scroll-mt-20 text-fg",
+      ...props
+    }
+  ),
+  p: (props) => /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted leading-7", ...props }),
+  a: (props) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: "text-fg underline decoration-line underline-offset-4 hover:decoration-fg transition-colors",
+      ...props
+    }
+  ),
+  ul: (props) => /* @__PURE__ */ jsx("ul", { className: "my-4 space-y-2 text-muted", role: "list", ...props }),
+  ol: (props) => /* @__PURE__ */ jsx("ol", { className: "my-4 space-y-2 text-muted list-decimal list-inside", role: "list", ...props }),
+  li: (props) => /* @__PURE__ */ jsxs("li", { className: "flex gap-2", role: "listitem", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-dim select-none", "aria-hidden": "true", children: "\u2022" }),
+    /* @__PURE__ */ jsx("span", { children: props.children })
+  ] }),
+  strong: (props) => /* @__PURE__ */ jsx("strong", { className: "font-medium text-fg", ...props }),
+  code: (props) => {
+    const text2 = typeof props.children === "string" ? props.children : "";
+    const isInline = typeof props.children === "string" && !text2.includes("\n");
+    if (!isInline) {
+      return /* @__PURE__ */ jsx("code", { ...props });
+    }
+    return /* @__PURE__ */ jsx(
+      "code",
+      {
+        style: {
+          padding: "2px 6px",
+          backgroundColor: "#141414",
+          border: "1px solid #1c1c1c",
+          borderRadius: "4px",
+          fontSize: "12px",
+          fontFamily: "var(--font-mono), ui-monospace, monospace"
+        },
+        ...props
+      }
+    );
+  },
+  pre: (props) => {
+    const lang = props["data-language"] || "";
+    const title = props["data-title"] || "";
+    const data = props["data-twoslash-annotations"];
+    const noerrors = typeof props["data-twoslash-noerrors"] === "string";
+    const active = Boolean(data || noerrors);
+    return /* @__PURE__ */ jsx(CodeBlock, { lang, title: title || void 0, lines: active, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "pre",
+        {
+          ...props,
+          style: {
+            margin: 0,
+            padding: 0,
+            background: "transparent",
+            fontFamily: "var(--font-mono), ui-monospace, monospace"
+          }
+        }
+      ),
+      active ? /* @__PURE__ */ jsx(Twoslash, { data, noerrors }) : null
+    ] }) });
+  },
+  blockquote: (props) => /* @__PURE__ */ jsx("blockquote", { className: "my-6 pl-4 border-l-2 border-line text-muted italic", ...props }),
+  hr: () => /* @__PURE__ */ jsx("hr", { className: "border-line my-12", "aria-hidden": "true" }),
+  table: (props) => /* @__PURE__ */ jsx("div", { className: "my-6 overflow-x-auto rounded-xl border border-line", role: "region", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", ...props }) }),
+  thead: (props) => /* @__PURE__ */ jsx("thead", { className: "bg-surface", ...props }),
+  th: (props) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: "text-left px-4 py-3 font-medium text-fg border-b border-line",
+      scope: "col",
+      ...props
+    }
+  ),
+  td: (props) => /* @__PURE__ */ jsx("td", { className: "px-4 py-3 border-b border-line/50 text-muted", ...props }),
+  tr: (props) => /* @__PURE__ */ jsx("tr", { className: "hover:bg-surface/50 transition-colors", ...props }),
+  Install,
+  Create,
+  Callout,
+  Steps,
+  Step,
+  Tabs,
+  Tab,
+  Cards,
+  Card,
+  Accordion,
+  AccordionItem,
+  Files,
+  File,
+  Folder,
+  Badge,
+  Banner,
+  Zoom,
+  CodeGroup,
+  CodeTab,
+  CodeTabs,
+  TypeTable,
+  Github,
+  Tooltip,
+  Video,
+  Mermaid,
+  TocInline
+};
+function ContentBase({ source }) {
+  const [MdxContent, setMdxContent] = useState(null);
+  useEffect(() => {
+    async function load() {
+      const { compile, run } = await import('@mdx-js/mdx');
+      const { default: remarkGfm } = await import('remark-gfm');
+      const { default: rehypeShiki } = await import('@shikijs/rehype');
+      const {
+        transformerMetaHighlight,
+        transformerNotationHighlight,
+        transformerNotationDiff,
+        transformerNotationFocus,
+        transformerNotationWordHighlight
+      } = await import('@shikijs/transformers');
+      const { transformerCollapse } = await import('../collapse');
+      const runtime = await import('react/jsx-runtime');
+      const code = await compile(source, {
+        outputFormat: "function-body",
+        remarkPlugins: [remarkGfm],
+        rehypePlugins: [
+          [
+            rehypeShiki,
+            {
+              themes: {
+                light: "github-light",
+                dark: "github-dark-default"
+              },
+              defaultColor: false,
+              transformers: [
+                transformerMetaHighlight(),
+                transformerNotationHighlight(),
+                transformerNotationDiff(),
+                transformerNotationFocus(),
+                transformerNotationWordHighlight(),
+                transformerCollapse(),
+                {
+                  pre(node) {
+                    const lang = this.options.lang || "";
+                    if (lang) {
+                      node.properties["data-language"] = lang;
+                    }
+                    const meta = this.options.meta?.__raw || "";
+                    const match = meta.match(/title="([^"]*)"/);
+                    if (match) {
+                      const title = match[1];
+                      if (title) node.properties["data-title"] = title;
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        ]
+      });
+      const module = await run(String(code), {
+        ...runtime,
+        baseUrl: import.meta.url
+      });
+      setMdxContent(
+        () => module.default
+      );
+    }
+    load();
+  }, [source]);
+  if (!MdxContent) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4 animate-pulse", "aria-busy": "true", "aria-label": "loading content", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-6 bg-surface rounded w-1/3" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 bg-surface/50 rounded w-full" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 bg-surface/50 rounded w-5/6" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 bg-surface/50 rounded w-4/6" }),
+      /* @__PURE__ */ jsx("div", { className: "h-32 bg-surface/30 rounded mt-6" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("article", { children: /* @__PURE__ */ jsx(MdxContent, { components }) });
+}
+const Content = memo(ContentBase);
+
+export { Content };

package/dist/components/copyable.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+/**
+ * Props for the Copyable component
+ */
+interface CopyableProps {
+    /** The value to copy to clipboard */
+    value: string;
+    /** Optional label displayed before the value */
+    label?: string;
+}
+declare function CopyableBase({ value, label }: CopyableProps): JSX.Element;
+declare const Copyable: react.MemoExoticComponent<typeof CopyableBase>;
+/**
+ * Props for the CopyBlock component
+ */
+interface CopyBlockProps {
+    /** The text content to display and copy */
+    children: string;
+}
+declare function CopyBlockBase({ children }: CopyBlockProps): JSX.Element;
+declare const CopyBlock: react.MemoExoticComponent<typeof CopyBlockBase>;
+
+export { CopyBlock, type CopyBlockProps, Copyable, type CopyableProps };

package/dist/components/copyable.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useCallback } from 'react';
+import { useCopy } from '../hooks/copy';
+import { IconCheck, IconCopy } from './icons';
+
+function CopyableBase({ value, label }) {
+  const { copied, copy } = useCopy();
+  const handleCopy = useCallback(() => {
+    copy(value);
+  }, [copy, value]);
+  return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-surface border border-line font-mono text-sm", children: [
+    label && /* @__PURE__ */ jsx("span", { className: "text-muted", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "text-fg", children: value }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCopy,
+        className: "text-muted hover:text-fg transition-colors",
+        "aria-label": "copy to clipboard",
+        children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14, className: "text-emerald-400" }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: copied ? "copied" : "" })
+  ] });
+}
+const Copyable = memo(CopyableBase);
+function CopyBlockBase({ children }) {
+  const { copied, copy } = useCopy();
+  const handleCopy = useCallback(() => {
+    copy(children);
+  }, [copy, children]);
+  return /* @__PURE__ */ jsxs("div", { className: "my-4 flex items-center justify-between gap-4 px-4 py-3 rounded-xl bg-surface border border-line font-mono text-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-fg truncate", children }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCopy,
+        className: "shrink-0 text-muted hover:text-fg transition-colors",
+        "aria-label": "copy to clipboard",
+        children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 16, className: "text-emerald-400" }) : /* @__PURE__ */ jsx(IconCopy, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: copied ? "copied" : "" })
+  ] });
+}
+const CopyBlock = memo(CopyBlockBase);
+
+export { CopyBlock, Copyable };

package/dist/components/copybutton.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { ReactElement } from 'react';
+
+interface CopyButtonProps {
+    text: string;
+    label?: string;
+}
+declare function CopyButtonBase({ text, label }: CopyButtonProps): ReactElement;
+declare const CopyButton: react.MemoExoticComponent<typeof CopyButtonBase>;
+
+export { CopyButton, type CopyButtonProps };

package/dist/components/copybutton.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo, useCallback } from 'react';
+import { useCopy } from '../hooks/copy';
+import { IconCheck, IconCopy } from './icons';
+
+function CopyButtonBase({ text, label = "Copy to clipboard" }) {
+  const { copied, copy } = useCopy();
+  const handleClick = useCallback(() => {
+    copy(text);
+  }, [copy, text]);
+  const handleMouseEnter = useCallback(
+    (e) => {
+      if (!copied) e.currentTarget.style.color = "#fafafa";
+    },
+    [copied]
+  );
+  const handleMouseLeave = useCallback(
+    (e) => {
+      if (!copied) e.currentTarget.style.color = "#737373";
+    },
+    [copied]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      "aria-label": copied ? "Copied to clipboard" : label,
+      "aria-live": "polite",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "6px",
+        color: copied ? "#22c55e" : "#737373",
+        background: "transparent",
+        border: "none",
+        cursor: "pointer",
+        transition: "color 0.15s"
+      },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
+    }
+  );
+}
+const CopyButton = memo(CopyButtonBase);
+
+export { CopyButton };

package/dist/components/countdown.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+
+/**
+ * Props for the Countdown component
+ */
+interface CountdownProps {
+    /** Target date/time to count down to */
+    target: Date | string | number;
+    /** Callback fired when countdown reaches zero */
+    onComplete?: () => void;
+    /** Display format: full shows labeled units, compact shows HH:MM:SS */
+    format?: "full" | "compact";
+    /** Accessible label describing the countdown purpose */
+    label?: string;
+}
+declare const Countdown: react.NamedExoticComponent<CountdownProps>;
+
+export { Countdown, type CountdownProps };

package/dist/components/countdown.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useMemo, useState, useRef, useEffect } from 'react';
+
+function calcTimeLeft(target) {
+  const diff = target.getTime() - Date.now();
+  if (diff <= 0) return null;
+  return {
+    days: Math.floor(diff / (1e3 * 60 * 60 * 24)),
+    hours: Math.floor(diff / (1e3 * 60 * 60) % 24),
+    minutes: Math.floor(diff / (1e3 * 60) % 60),
+    seconds: Math.floor(diff / 1e3 % 60)
+  };
+}
+function formatTime(t) {
+  const parts = [];
+  if (t.days > 0) parts.push(`${t.days} day${t.days !== 1 ? "s" : ""}`);
+  parts.push(`${t.hours} hour${t.hours !== 1 ? "s" : ""}`);
+  parts.push(`${t.minutes} minute${t.minutes !== 1 ? "s" : ""}`);
+  parts.push(`${t.seconds} second${t.seconds !== 1 ? "s" : ""}`);
+  return parts.join(", ");
+}
+const Countdown = memo(function Countdown2({
+  target,
+  onComplete,
+  format = "full",
+  label
+}) {
+  const targetDate = useMemo(
+    () => typeof target === "string" || typeof target === "number" ? new Date(target) : target,
+    [target]
+  );
+  const [timeLeft, setTimeLeft] = useState(() => calcTimeLeft(targetDate));
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+  useEffect(() => {
+    setTimeLeft(calcTimeLeft(targetDate));
+    const timer = setInterval(() => {
+      const remaining = calcTimeLeft(targetDate);
+      setTimeLeft(remaining);
+      if (!remaining) {
+        clearInterval(timer);
+        onCompleteRef.current?.();
+      }
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [targetDate]);
+  const timeDescription = timeLeft ? formatTime(timeLeft) : "countdown complete";
+  const ariaLabel = label ? `${label}: ${timeDescription}` : timeDescription;
+  if (!timeLeft) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "font-mono text-muted",
+        role: "timer",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        "aria-label": ariaLabel,
+        children: "00:00:00"
+      }
+    );
+  }
+  if (format === "compact") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "font-mono",
+        role: "timer",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        "aria-label": ariaLabel,
+        children: [
+          String(timeLeft.hours + timeLeft.days * 24).padStart(2, "0"),
+          ":",
+          String(timeLeft.minutes).padStart(2, "0"),
+          ":",
+          String(timeLeft.seconds).padStart(2, "0")
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex gap-4",
+      role: "timer",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "aria-label": ariaLabel,
+      children: [
+        timeLeft.days > 0 && /* @__PURE__ */ jsxs("div", { className: "text-center", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: timeLeft.days }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: "days" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-center", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: String(timeLeft.hours).padStart(2, "0") }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: "hours" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-center", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: String(timeLeft.minutes).padStart(2, "0") }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: "min" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-center", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: String(timeLeft.seconds).padStart(2, "0") }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: "sec" })
+        ] })
+      ]
+    }
+  );
+});
+
+export { Countdown };

package/dist/components/create.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface CreateProps {
+    package?: string;
+}
+declare function CreateBase({ package: pkg }: CreateProps): ReactNode;
+declare const Create: react.MemoExoticComponent<typeof CreateBase>;
+
+export { Create, type CreateProps };