fromsrc 0.0.0 → 0.0.2

package/dist/components/typetable.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo, useState } from 'react';
+
+const TypeTable = memo(function TypeTable2({ data }) {
+  const entries = Object.entries(data);
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "my-6 rounded-lg border border-line overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", role: "grid", "aria-label": "property types", children: [
+    /* @__PURE__ */ jsx("thead", { className: "bg-surface", children: /* @__PURE__ */ jsxs("tr", { role: "row", children: [
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "text-left px-4 py-3 font-medium text-fg", children: "prop" }),
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "text-left px-4 py-3 font-medium text-fg", children: "type" }),
+      /* @__PURE__ */ jsx(
+        "th",
+        {
+          scope: "col",
+          className: "text-left px-4 py-3 font-medium text-fg hidden sm:table-cell",
+          children: "default"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: entries.map(([name, info]) => /* @__PURE__ */ jsx(TypeRow, { name, info }, name)) })
+  ] }) });
+});
+const TypeRow = memo(function TypeRow2({ name, info }) {
+  const [open, setOpen] = useState(false);
+  const rowId = `typerow-${name}`;
+  const descId = `typedesc-${name}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        role: "row",
+        className: "border-t border-line/50 hover:bg-surface/50 cursor-pointer",
+        onClick: () => setOpen(!open),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen(!open);
+          }
+        },
+        tabIndex: 0,
+        "aria-expanded": info.description ? open : void 0,
+        "aria-controls": info.description ? descId : void 0,
+        id: rowId,
+        children: [
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3", role: "gridcell", children: /* @__PURE__ */ jsxs("code", { className: "text-xs bg-surface px-1.5 py-0.5 rounded text-fg", children: [
+            name,
+            !info.required && /* @__PURE__ */ jsx("span", { className: "text-muted", "aria-label": "optional", children: "?" })
+          ] }) }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-muted font-mono text-xs", role: "gridcell", children: info.type }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-muted text-xs hidden sm:table-cell", role: "gridcell", children: info.default || "-" })
+        ]
+      }
+    ),
+    open && info.description && /* @__PURE__ */ jsx(
+      "tr",
+      {
+        role: "row",
+        className: "border-t border-line/30 bg-surface/30",
+        id: descId,
+        "aria-labelledby": rowId,
+        children: /* @__PURE__ */ jsx("td", { colSpan: 3, className: "px-4 py-3 text-sm text-muted", role: "gridcell", children: info.description })
+      }
+    )
+  ] });
+});
+
+export { TypeTable };

package/dist/components/typewriter.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+/**
+ * Props for the Typewriter component
+ */
+interface TypewriterProps {
+    /** Array of words to cycle through */
+    words: string[];
+    /** Typing speed in milliseconds per character */
+    speed?: number;
+    /** Delay before deleting in milliseconds */
+    delay?: number;
+    /** Whether to loop through words continuously */
+    loop?: boolean;
+}
+declare function TypewriterBase({ words, speed, delay, loop, }: TypewriterProps): JSX.Element;
+declare const Typewriter: react.MemoExoticComponent<typeof TypewriterBase>;
+
+export { Typewriter, type TypewriterProps };

package/dist/components/typewriter.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useEffect } from 'react';
+
+const DELETE_SPEED_FACTOR = 0.5;
+function TypewriterBase({
+  words,
+  speed = 100,
+  delay = 2e3,
+  loop = true
+}) {
+  const [index, setIndex] = useState(0);
+  const [text, setText] = useState("");
+  const [deleting, setDeleting] = useState(false);
+  useEffect(() => {
+    const word = words[index];
+    if (!word) return;
+    if (deleting) {
+      if (text === "") {
+        setDeleting(false);
+        setIndex(
+          (i) => loop ? (i + 1) % words.length : Math.min(i + 1, words.length - 1)
+        );
+        return;
+      }
+      const timeout2 = setTimeout(() => {
+        setText((t) => t.slice(0, -1));
+      }, speed * DELETE_SPEED_FACTOR);
+      return () => clearTimeout(timeout2);
+    }
+    if (text === word) {
+      if (!loop && index === words.length - 1) return;
+      const timeout2 = setTimeout(() => {
+        setDeleting(true);
+      }, delay);
+      return () => clearTimeout(timeout2);
+    }
+    const timeout = setTimeout(() => {
+      setText(word.slice(0, text.length + 1));
+    }, speed);
+    return () => clearTimeout(timeout);
+  }, [words, index, text, deleting, speed, delay, loop]);
+  return /* @__PURE__ */ jsxs("span", { role: "status", "aria-label": `Typing: ${words.join(", ")}`, children: [
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", "aria-atomic": "true", children: text }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "animate-pulse", children: "|" })
+  ] });
+}
+const Typewriter = memo(TypewriterBase);
+
+export { Typewriter };

package/dist/components/version.d.ts

@@ -0,0 +1,29 @@
+import { JSX } from 'react';
+
+/**
+ * Represents a selectable version option
+ */
+interface Version {
+    /** Unique identifier for the version */
+    id: string;
+    /** Display label for the version */
+    label: string;
+    /** Optional URL to navigate to when selected */
+    href?: string;
+}
+/**
+ * Props for the VersionSelect component
+ */
+interface VersionSelectProps {
+    /** List of available versions */
+    versions: Version[];
+    /** ID of the currently selected version */
+    current: string;
+    /** Callback when version changes (for non-href versions) */
+    onChange?: (version: string) => void;
+    /** Accessible label for the dropdown */
+    label?: string;
+}
+declare function VersionSelect({ versions, current, onChange, label, }: VersionSelectProps): JSX.Element;
+
+export { type Version, VersionSelect, type VersionSelectProps };

package/dist/components/version.js

@@ -0,0 +1,181 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useId, useCallback } from 'react';
+import { IconChevronDown, IconCheck } from './icons';
+
+function VersionSelect({
+  versions,
+  current,
+  onChange,
+  label = "Version"
+}) {
+  const [open, setOpen] = useState(false);
+  const [focused, setFocused] = useState(-1);
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const instanceId = useId();
+  const listboxId = `${instanceId}-listbox`;
+  const currentVersion = versions.find((v) => v.id === current);
+  const currentIndex = versions.findIndex((v) => v.id === current);
+  const getOptionId = useCallback(
+    (versionId) => `${instanceId}-option-${versionId}`,
+    [instanceId]
+  );
+  const selectVersion = useCallback(
+    (version) => {
+      if (version.href) {
+        window.location.href = version.href;
+      } else {
+        onChange?.(version.id);
+      }
+      setOpen(false);
+      triggerRef.current?.focus();
+    },
+    [onChange]
+  );
+  const close = useCallback(() => {
+    setOpen(false);
+    setFocused(-1);
+    triggerRef.current?.focus();
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!open) {
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault();
+          setOpen(true);
+          setFocused(currentIndex >= 0 ? currentIndex : 0);
+        }
+        return;
+      }
+      switch (e.key) {
+        case "Escape":
+          e.preventDefault();
+          close();
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          setFocused((f) => Math.min(f + 1, versions.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setFocused((f) => Math.max(f - 1, 0));
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (focused >= 0) {
+            const version = versions[focused];
+            if (version) selectVersion(version);
+          }
+          break;
+        case "Home":
+          e.preventDefault();
+          setFocused(0);
+          break;
+        case "End":
+          e.preventDefault();
+          setFocused(versions.length - 1);
+          break;
+        case "Tab":
+          close();
+          break;
+        case "PageDown":
+          e.preventDefault();
+          setFocused((f) => Math.min(f + 5, versions.length - 1));
+          break;
+        case "PageUp":
+          e.preventDefault();
+          setFocused((f) => Math.max(f - 5, 0));
+          break;
+      }
+    },
+    [open, currentIndex, versions, focused, selectVersion, close]
+  );
+  const focusedVersion = focused >= 0 ? versions[focused] : void 0;
+  const handleClick = useCallback(() => {
+    setOpen(!open);
+    if (!open) setFocused(currentIndex >= 0 ? currentIndex : 0);
+  }, [open, currentIndex]);
+  const handleBlur = useCallback(
+    (e) => {
+      if (!containerRef.current?.contains(e.relatedTarget)) {
+        setOpen(false);
+        setFocused(-1);
+      }
+    },
+    []
+  );
+  const handleBackdropClick = useCallback(() => {
+    close();
+  }, [close]);
+  const handleOptionClick = useCallback(
+    (version) => {
+      selectVersion(version);
+    },
+    [selectVersion]
+  );
+  const handleOptionMouseEnter = useCallback((index) => {
+    setFocused(index);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", ref: containerRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        className: "flex items-center gap-2 px-3 py-1.5 text-sm bg-surface border border-line rounded-lg hover:bg-surface/80 transition-colors",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": open ? listboxId : void 0,
+        "aria-label": `${label}: ${currentVersion?.label || current}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-fg", children: currentVersion?.label || current }),
+          /* @__PURE__ */ jsx(
+            IconChevronDown,
+            {
+              size: 14,
+              className: `text-muted transition-transform ${open ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: handleBackdropClick, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: listRef,
+          id: listboxId,
+          className: "absolute left-0 top-full mt-1 z-50 min-w-[120px] py-1 bg-surface border border-line rounded-lg shadow-lg",
+          role: "listbox",
+          "aria-label": label,
+          "aria-activedescendant": focusedVersion ? getOptionId(focusedVersion.id) : void 0,
+          children: versions.map((version, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              id: getOptionId(version.id),
+              role: "option",
+              "aria-selected": version.id === current,
+              onClick: () => handleOptionClick(version),
+              onMouseEnter: () => handleOptionMouseEnter(i),
+              className: `flex items-center justify-between gap-2 w-full px-3 py-2 text-sm text-left cursor-pointer hover:bg-bg transition-colors ${i === focused ? "bg-bg" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: version.id === current ? "text-fg" : "text-muted", children: version.label }),
+                version.id === current && /* @__PURE__ */ jsx(IconCheck, { size: 14, className: "text-accent" })
+              ]
+            },
+            version.id
+          ))
+        }
+      )
+    ] })
+  ] });
+}
+
+export { VersionSelect };

package/dist/components/video.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { ReactElement } from 'react';
+
+/**
+ * caption track configuration for native video elements
+ */
+interface Caption {
+    src: string;
+    label: string;
+    lang: string;
+    default?: boolean;
+}
+/**
+ * video player component props supporting native video, youtube, and vimeo
+ */
+interface VideoProps {
+    src: string;
+    title?: string;
+    poster?: string;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+    captions?: Caption[];
+    className?: string;
+}
+declare function VideoComponent({ src, title, poster, autoplay, loop, muted, controls, captions, className, }: VideoProps): ReactElement;
+/**
+ * video player with support for native video, youtube, and vimeo embeds
+ */
+declare const Video: react.MemoExoticComponent<typeof VideoComponent>;
+
+export { type Caption, Video, type VideoProps };

package/dist/components/video.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo, useState } from 'react';
+
+function extractYoutubeId(url) {
+  if (url.includes("youtu.be")) {
+    return url.split("/").pop()?.split("?")[0] ?? null;
+  }
+  try {
+    return new URL(url).searchParams.get("v");
+  } catch {
+    return null;
+  }
+}
+function extractVimeoId(url) {
+  return url.split("/").pop()?.split("?")[0] ?? null;
+}
+function VideoComponent({
+  src,
+  title,
+  poster,
+  autoplay = false,
+  loop = false,
+  muted = false,
+  controls = true,
+  captions,
+  className = ""
+}) {
+  const [error, setError] = useState(false);
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "alert",
+        "aria-live": "polite",
+        className: `my-6 aspect-video rounded-xl border border-line bg-surface/30 flex items-center justify-center text-muted text-sm ${className}`,
+        children: "failed to load video"
+      }
+    );
+  }
+  const isYoutube = src.includes("youtube.com") || src.includes("youtu.be");
+  const isVimeo = src.includes("vimeo.com");
+  if (isYoutube) {
+    const id = extractYoutubeId(src);
+    if (!id) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "alert",
+          "aria-live": "polite",
+          className: `my-6 aspect-video rounded-xl border border-line bg-surface/30 flex items-center justify-center text-muted text-sm ${className}`,
+          children: "invalid youtube url"
+        }
+      );
+    }
+    const params = new URLSearchParams();
+    if (autoplay) params.set("autoplay", "1");
+    if (loop) params.set("loop", "1");
+    const query = params.toString();
+    return /* @__PURE__ */ jsx(
+      "figure",
+      {
+        role: "group",
+        "aria-label": title ?? "youtube video",
+        className: `my-6 aspect-video rounded-xl border border-line overflow-hidden ${className}`,
+        children: /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            src: `https://www.youtube.com/embed/${id}${query ? `?${query}` : ""}`,
+            title: title ?? "youtube video",
+            allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+            allowFullScreen: true,
+            loading: "lazy",
+            className: "w-full h-full"
+          }
+        )
+      }
+    );
+  }
+  if (isVimeo) {
+    const id = extractVimeoId(src);
+    if (!id) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "alert",
+          "aria-live": "polite",
+          className: `my-6 aspect-video rounded-xl border border-line bg-surface/30 flex items-center justify-center text-muted text-sm ${className}`,
+          children: "invalid vimeo url"
+        }
+      );
+    }
+    const params = new URLSearchParams();
+    if (autoplay) params.set("autoplay", "1");
+    if (loop) params.set("loop", "1");
+    const query = params.toString();
+    return /* @__PURE__ */ jsx(
+      "figure",
+      {
+        role: "group",
+        "aria-label": title ?? "vimeo video",
+        className: `my-6 aspect-video rounded-xl border border-line overflow-hidden ${className}`,
+        children: /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            src: `https://player.vimeo.com/video/${id}${query ? `?${query}` : ""}`,
+            title: title ?? "vimeo video",
+            allow: "autoplay; fullscreen; picture-in-picture",
+            allowFullScreen: true,
+            loading: "lazy",
+            className: "w-full h-full"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "video",
+    {
+      src,
+      poster,
+      autoPlay: autoplay,
+      loop,
+      muted: muted || autoplay,
+      controls,
+      playsInline: true,
+      onError: () => setError(true),
+      "aria-label": title ?? "video",
+      "aria-describedby": captions?.length ? "video-captions" : void 0,
+      className: `my-6 w-full aspect-video rounded-xl border border-line object-cover ${className}`,
+      children: captions?.map((track) => /* @__PURE__ */ jsx(
+        "track",
+        {
+          kind: "captions",
+          src: track.src,
+          srcLang: track.lang,
+          label: track.label,
+          default: track.default
+        },
+        track.lang
+      ))
+    }
+  );
+}
+const Video = memo(VideoComponent);
+
+export { Video };

package/dist/components/zoom.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, JSX } from 'react';
+
+interface ZoomProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function Zoom({ children, className }: ZoomProps): JSX.Element;
+
+export { Zoom, type ZoomProps };

package/dist/components/zoom.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useEscapeKey } from '../hooks/escapekey';
+import { useScrollLock } from '../hooks/scrolllock';
+
+function Zoom({ children, className }) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const closeRef = useRef(null);
+  const backdropRef = useRef(null);
+  const isbutton = useCallback(
+    (value) => value !== null,
+    []
+  );
+  const close = useCallback(() => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  }, []);
+  const handleOpen = useCallback(() => {
+    setOpen(true);
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const focusable = [backdropRef.current, closeRef.current].filter(isbutton);
+        const current = document.activeElement;
+        const index = current instanceof HTMLButtonElement ? focusable.indexOf(current) : -1;
+        const next = e.shiftKey ? focusable[(index - 1 + focusable.length) % focusable.length] : focusable[(index + 1) % focusable.length];
+        next?.focus();
+      }
+    },
+    []
+  );
+  useEscapeKey(close, open);
+  useScrollLock(open);
+  useEffect(() => {
+    if (!open) return;
+    closeRef.current?.focus();
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        onClick: handleOpen,
+        className: `cursor-zoom-in inline-block bg-transparent border-none p-0 ${className || ""}`,
+        "aria-haspopup": "dialog",
+        "aria-label": "zoom image",
+        children
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "zoomed image",
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-8",
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: backdropRef,
+              type: "button",
+              className: "absolute inset-0 cursor-zoom-out",
+              onClick: close,
+              "aria-label": "close zoomed view"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "relative max-w-full max-h-full [&>img]:max-w-full [&>img]:max-h-[80vh] [&>img]:object-contain pointer-events-none", children }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: closeRef,
+              type: "button",
+              onClick: close,
+              className: "absolute top-4 right-4 p-2 text-white/70 hover:text-white rounded-full hover:bg-white/10 transition-colors",
+              "aria-label": "close zoomed view",
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "w-6 h-6",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M6 18L18 6M6 6l12 12"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+export { Zoom };