fromsrc 0.0.2 → 0.0.22

package/dist/components/command.js

@@ -3,15 +3,24 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useId, useCallback, useEffect } from 'react';
 import { IconSearch } from './icons';
 
-function Command({ items, placeholder = "search...", onSelect }) {
+function Command({
+  items,
+  placeholder = "Search...",
+  onSelect
+}) {
   const [query, setQuery] = useState("");
   const [index, setIndex] = useState(0);
   const inputRef = useRef(null);
   const listRef = useRef(null);
   const id = useId();
-  const filtered = items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
+  const filtered = items.filter(
+    (item) => item.label.toLowerCase().includes(query.toLowerCase())
+  );
   const listId = `${id}-list`;
-  const getOptionId = useCallback((itemId) => `${id}-option-${itemId}`, [id]);
+  const getOptionId = useCallback(
+    (itemId) => `${id}-option-${itemId}`,
+    [id]
+  );
   useEffect(() => {
     setIndex(0);
   }, [query]);
@@ -24,31 +33,37 @@ function Command({ items, placeholder = "search...", onSelect }) {
   const handleKeyDown = useCallback(
     (e) => {
       switch (e.key) {
-        case "ArrowDown":
+        case "ArrowDown": {
           e.preventDefault();
           setIndex((i) => Math.min(i + 1, filtered.length - 1));
           break;
-        case "ArrowUp":
+        }
+        case "ArrowUp": {
           e.preventDefault();
           setIndex((i) => Math.max(i - 1, 0));
           break;
-        case "Home":
+        }
+        case "Home": {
           e.preventDefault();
           setIndex(0);
           break;
-        case "End":
+        }
+        case "End": {
           e.preventDefault();
           setIndex(Math.max(0, filtered.length - 1));
           break;
-        case "PageDown":
+        }
+        case "PageDown": {
           e.preventDefault();
           setIndex((i) => Math.min(i + 5, filtered.length - 1));
           break;
-        case "PageUp":
+        }
+        case "PageUp": {
           e.preventDefault();
           setIndex((i) => Math.max(i - 5, 0));
           break;
-        case "Escape":
+        }
+        case "Escape": {
           e.preventDefault();
           if (query) {
             setQuery("");
@@ -56,20 +71,25 @@ function Command({ items, placeholder = "search...", onSelect }) {
             inputRef.current?.blur();
           }
           break;
-        case "Enter":
+        }
+        case "Enter": {
           e.preventDefault();
           if (filtered[index]) {
             filtered[index].onSelect?.();
             onSelect?.(filtered[index]);
           }
           break;
+        }
       }
     },
     [filtered, index, query, onSelect]
   );
-  const handleChange = useCallback((e) => {
-    setQuery(e.target.value);
-  }, []);
+  const handleChange = useCallback(
+    (e) => {
+      setQuery(e.target.value);
+    },
+    []
+  );
   const handleItemClick = useCallback(
     (item) => {
       item.onSelect?.();
@@ -111,7 +131,14 @@ function Command({ items, placeholder = "search...", onSelect }) {
         role: "listbox",
         "aria-label": "results",
         className: "max-h-64 overflow-y-auto p-1",
-        children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { role: "status", className: "px-3 py-6 text-center text-sm text-muted", children: "no results" }) : filtered.map((item, i) => /* @__PURE__ */ jsxs(
+        children: filtered.length === 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "status",
+            className: "px-3 py-6 text-center text-sm text-muted",
+            children: "no results"
+          }
+        ) : filtered.map((item, i) => /* @__PURE__ */ jsxs(
           "button",
           {
             id: getOptionId(item.id),

package/dist/components/compare.js

@@ -2,7 +2,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo } from 'react';
 
-const Compare = memo(function Compare2({ children, label }) {
+const Compare = memo(function Compare2({
+  children,
+  label
+}) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -15,17 +18,21 @@ const Compare = memo(function Compare2({ children, label }) {
   );
 });
 const variants = {
+  bad: "border-red-500/30 bg-red-500/5",
   default: "border-line",
-  good: "border-emerald-500/30 bg-emerald-500/5",
-  bad: "border-red-500/30 bg-red-500/5"
+  good: "border-emerald-500/30 bg-emerald-500/5"
 };
 const titleVariants = {
+  bad: "text-red-400",
   default: "text-fg",
-  good: "text-emerald-400",
-  bad: "text-red-400"
+  good: "text-emerald-400"
 };
-const Column = memo(function Column2({ title, variant = "default", children }) {
-  const headingId = `column-${title.toLowerCase().replace(/\s+/g, "-")}`;
+const Column = memo(function Column2({
+  title,
+  variant = "default",
+  children
+}) {
+  const headingId = `column-${title.toLowerCase().replaceAll(/\s+/g, "-")}`;
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -45,7 +52,12 @@ const Column = memo(function Column2({ title, variant = "default", children }) {
     }
   );
 });
-const CompareRow = memo(function CompareRow2({ left, right, leftLabel, rightLabel }) {
+const CompareRow = memo(function CompareRow2({
+  left,
+  right,
+  leftLabel,
+  rightLabel
+}) {
   const leftId = "compare-row-left";
   const rightId = "compare-row-right";
   const resolvedLeftLabel = leftLabel || "before";

package/dist/components/content.js

@@ -5,16 +5,16 @@ import { AccordionItem, Accordion } from './accordion';
 import { Badge } from './badge';
 import { Banner } from './banner';
 import { Callout } from './callout';
-import { Card, Cards } from './cards';
+import { Cards, Card } from './cards';
 import { CodeBlock } from './codeblock';
 import { CodeTabs, CodeTab, CodeGroup } from './codegroup';
 import { Create } from './create';
-import { Folder, File, Files } from './files';
+import { Folder, Files, File } 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 { Steps, Step } from './steps';
+import { Tabs, Tab } from './tabs';
 import { TocInline } from './toc/inline';
 import { Tooltip } from './tooltip';
 import { Twoslash } from './twoslash';
@@ -23,51 +23,65 @@ 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);
+  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, "-");
+  return value.trim().toLowerCase().replaceAll(/[^a-z0-9\s-]/g, "").replaceAll(/\s+/g, "-").replaceAll(/-+/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",
+  Accordion,
+  AccordionItem,
+  Badge,
+  Banner,
+  Callout,
+  Card,
+  Cards,
+  CodeGroup,
+  CodeTab,
+  CodeTabs,
+  Create,
+  File,
+  Files,
+  Folder,
+  Github,
+  Install,
+  Mermaid,
+  Step,
+  Steps,
+  Tab,
+  Tabs,
+  TocInline,
+  Tooltip,
+  TypeTable,
+  Video,
+  Zoom,
+  a: (props) => /* @__PURE__ */ jsx(
+    "a",
     {
-      id: getId(props.children),
-      className: "text-base font-medium mt-8 mb-3 scroll-mt-20 text-fg",
+      className: "text-fg underline decoration-line underline-offset-4 hover:decoration-fg transition-colors",
       ...props
     }
   ),
-  p: (props) => /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted leading-7", ...props }),
-  a: (props) => /* @__PURE__ */ jsx(
-    "a",
+  blockquote: (props) => /* @__PURE__ */ jsx(
+    "blockquote",
     {
-      className: "text-fg underline decoration-line underline-offset-4 hover:decoration-fg transition-colors",
+      className: "my-6 pl-4 border-l-2 border-line text-muted italic",
       ...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");
@@ -78,17 +92,54 @@ const components = {
       "code",
       {
         style: {
-          padding: "2px 6px",
           backgroundColor: "#141414",
           border: "1px solid #1c1c1c",
           borderRadius: "4px",
+          fontFamily: "var(--font-mono), ui-monospace, monospace",
           fontSize: "12px",
-          fontFamily: "var(--font-mono), ui-monospace, monospace"
+          padding: "2px 6px"
         },
         ...props
       }
     );
   },
+  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
+    }
+  ),
+  hr: () => /* @__PURE__ */ jsx("hr", { className: "border-line my-12", "aria-hidden": "true" }),
+  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 })
+  ] }),
+  ol: (props) => /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: "my-4 space-y-2 text-muted list-decimal list-inside",
+      role: "list",
+      ...props
+    }
+  ),
+  p: (props) => /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted leading-7", ...props }),
   pre: (props) => {
     const lang = props["data-language"] || "";
     const title = props["data-title"] || "";
@@ -101,20 +152,26 @@ const components = {
         {
           ...props,
           style: {
-            margin: 0,
-            padding: 0,
             background: "transparent",
-            fontFamily: "var(--font-mono), ui-monospace, monospace"
+            fontFamily: "var(--font-mono), ui-monospace, monospace",
+            margin: 0,
+            padding: 0
           }
         }
       ),
       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 }),
+  strong: (props) => /* @__PURE__ */ jsx("strong", { className: "font-medium text-fg", ...props }),
+  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 })
+    }
+  ),
+  td: (props) => /* @__PURE__ */ jsx("td", { className: "px-4 py-3 border-b border-line/50 text-muted", ...props }),
   th: (props) => /* @__PURE__ */ jsx(
     "th",
     {
@@ -123,34 +180,9 @@ const components = {
       ...props
     }
   ),
-  td: (props) => /* @__PURE__ */ jsx("td", { className: "px-4 py-3 border-b border-line/50 text-muted", ...props }),
+  thead: (props) => /* @__PURE__ */ jsx("thead", { className: "bg-surface", ...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
+  ul: (props) => /* @__PURE__ */ jsx("ul", { className: "my-4 space-y-2 text-muted", role: "list", ...props })
 };
 function ContentBase({ source }) {
   const [MdxContent, setMdxContent] = useState(null);
@@ -170,16 +202,15 @@ function ContentBase({ source }) {
       const runtime = await import('react/jsx-runtime');
       const code = await compile(source, {
         outputFormat: "function-body",
-        remarkPlugins: [remarkGfm],
         rehypePlugins: [
           [
             rehypeShiki,
             {
+              defaultColor: false,
               themes: {
                 light: "github-light",
                 dark: "github-dark-default"
               },
-              defaultColor: false,
               transformers: [
                 transformerMetaHighlight(),
                 transformerNotationHighlight(),
@@ -197,14 +228,17 @@ function ContentBase({ source }) {
                     const match = meta.match(/title="([^"]*)"/);
                     if (match) {
                       const title = match[1];
-                      if (title) node.properties["data-title"] = title;
+                      if (title) {
+                        node.properties["data-title"] = title;
+                      }
                     }
                   }
                 }
               ]
             }
           ]
-        ]
+        ],
+        remarkPlugins: [remarkGfm]
       });
       const module = await run(String(code), {
         ...runtime,
@@ -217,13 +251,21 @@ function ContentBase({ source }) {
     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__ */ 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 }) });
 }

package/dist/components/copybutton.d.ts

@@ -5,7 +5,7 @@ interface CopyButtonProps {
     text: string;
     label?: string;
 }
-declare function CopyButtonBase({ text, label }: CopyButtonProps): ReactElement;
+declare function CopyButtonBase({ text, label, }: CopyButtonProps): ReactElement;
 declare const CopyButton: react.MemoExoticComponent<typeof CopyButtonBase>;
 
 export { CopyButton, type CopyButtonProps };

package/dist/components/copybutton.js

@@ -4,20 +4,27 @@ import { memo, useCallback } from 'react';
 import { useCopy } from '../hooks/copy';
 import { IconCheck, IconCopy } from './icons';
 
-function CopyButtonBase({ text, label = "Copy to clipboard" }) {
+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";
+      if (!copied) {
+        e.currentTarget.style.color = "#fafafa";
+      }
     },
     [copied]
   );
   const handleMouseLeave = useCallback(
     (e) => {
-      if (!copied) e.currentTarget.style.color = "#737373";
+      if (!copied) {
+        e.currentTarget.style.color = "#737373";
+      }
     },
     [copied]
   );
@@ -29,14 +36,14 @@ function CopyButtonBase({ text, label = "Copy to clipboard" }) {
       "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",
+        color: copied ? "#22c55e" : "#737373",
         cursor: "pointer",
+        display: "flex",
+        justifyContent: "center",
+        padding: "6px",
         transition: "color 0.15s"
       },
       onMouseEnter: handleMouseEnter,

package/dist/components/countdown.js

@@ -4,7 +4,9 @@ import { memo, useMemo, useState, useRef, useEffect } from 'react';
 
 function calcTimeLeft(target) {
   const diff = target.getTime() - Date.now();
-  if (diff <= 0) return null;
+  if (diff <= 0) {
+    return null;
+  }
   return {
     days: Math.floor(diff / (1e3 * 60 * 60 * 24)),
     hours: Math.floor(diff / (1e3 * 60 * 60) % 24),
@@ -14,7 +16,9 @@ function calcTimeLeft(target) {
 }
 function formatTime(t) {
   const parts = [];
-  if (t.days > 0) parts.push(`${t.days} day${t.days !== 1 ? "s" : ""}`);
+  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" : ""}`);
@@ -30,7 +34,9 @@ const Countdown = memo(function Countdown2({
     () => typeof target === "string" || typeof target === "number" ? new Date(target) : target,
     [target]
   );
-  const [timeLeft, setTimeLeft] = useState(() => calcTimeLeft(targetDate));
+  const [timeLeft, setTimeLeft] = useState(
+    () => calcTimeLeft(targetDate)
+  );
   const onCompleteRef = useRef(onComplete);
   onCompleteRef.current = onComplete;
   useEffect(() => {