fromsrc 0.0.0 → 0.0.2

package/dist/components/hover.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+
+/**
+ * Props for displaying inline hover information with colored text
+ */
+interface HoverInfoProps {
+    children: React.ReactNode;
+    info: string;
+    type?: "type" | "value" | "error";
+}
+/**
+ * Props for displaying a popup with custom trigger and content
+ */
+interface TypePopupProps {
+    trigger: React.ReactNode;
+    content: React.ReactNode;
+}
+declare function HoverInfoBase({ children, info, type }: HoverInfoProps): React.ReactElement;
+declare function TypePopupBase({ trigger, content }: TypePopupProps): React.ReactElement;
+declare const HoverInfo: react.MemoExoticComponent<typeof HoverInfoBase>;
+declare const TypePopup: react.MemoExoticComponent<typeof TypePopupBase>;
+
+export { HoverInfo, type HoverInfoProps, TypePopup, type TypePopupProps };

package/dist/components/hover.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useId, useCallback } from 'react';
+
+const colors = {
+  type: "text-cyan-400",
+  value: "text-green-400",
+  error: "text-red-400"
+};
+function HoverInfoBase({ children, info, type = "type" }) {
+  const [show, setShow] = useState(false);
+  const id = useId();
+  const handleShow = useCallback(() => setShow(true), []);
+  const handleHide = useCallback(() => setShow(false), []);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "relative inline cursor-help border-b border-dotted border-current",
+      onMouseEnter: handleShow,
+      onMouseLeave: handleHide,
+      onFocus: handleShow,
+      onBlur: handleHide,
+      tabIndex: 0,
+      "aria-describedby": show ? id : void 0,
+      children: [
+        children,
+        show && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id,
+            role: "tooltip",
+            className: "absolute left-0 top-full z-50 mt-1 whitespace-nowrap rounded border border-line bg-surface px-2 py-1 font-mono text-xs shadow-lg",
+            children: /* @__PURE__ */ jsx("span", { className: colors[type], children: info })
+          }
+        )
+      ]
+    }
+  );
+}
+function TypePopupBase({ trigger, content }) {
+  const [show, setShow] = useState(false);
+  const id = useId();
+  const handleShow = useCallback(() => setShow(true), []);
+  const handleHide = useCallback(() => setShow(false), []);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "relative inline",
+      onMouseEnter: handleShow,
+      onMouseLeave: handleHide,
+      onFocus: handleShow,
+      onBlur: handleHide,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "cursor-help border-b border-dotted border-current",
+            tabIndex: 0,
+            "aria-describedby": show ? id : void 0,
+            children: trigger
+          }
+        ),
+        show && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id,
+            role: "tooltip",
+            className: "absolute left-0 top-full z-50 mt-1 max-w-md rounded border border-line bg-surface p-2 font-mono text-xs shadow-lg",
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+const HoverInfo = memo(HoverInfoBase);
+const TypePopup = memo(TypePopupBase);
+
+export { HoverInfo, TypePopup };

package/dist/components/icons.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+
+/**
+ * Props for icon components.
+ */
+interface IconProps {
+    className?: string;
+    size?: number;
+    fill?: string;
+}
+declare const IconCheck: react.NamedExoticComponent<IconProps>;
+declare const IconX: react.NamedExoticComponent<IconProps>;
+declare const IconChevronRight: react.NamedExoticComponent<IconProps>;
+declare const IconChevronLeft: react.NamedExoticComponent<IconProps>;
+declare const IconChevronDown: react.NamedExoticComponent<IconProps>;
+declare const IconInfo: react.NamedExoticComponent<IconProps>;
+declare const IconCheckCircle: react.NamedExoticComponent<IconProps>;
+declare const IconAlertCircle: react.NamedExoticComponent<IconProps>;
+declare const IconXCircle: react.NamedExoticComponent<IconProps>;
+declare const IconThumbsUp: react.NamedExoticComponent<IconProps>;
+declare const IconThumbsDown: react.NamedExoticComponent<IconProps>;
+declare const IconStar: react.NamedExoticComponent<IconProps>;
+declare const IconPanelLeft: react.NamedExoticComponent<IconProps>;
+declare const IconExternalLink: react.NamedExoticComponent<IconProps>;
+declare const IconLanguages: react.NamedExoticComponent<IconProps>;
+declare const IconSearch: react.NamedExoticComponent<IconProps>;
+declare const IconCopy: react.NamedExoticComponent<IconProps>;
+declare const IconCircle: react.NamedExoticComponent<IconProps>;
+
+export { IconAlertCircle, IconCheck, IconCheckCircle, IconChevronDown, IconChevronLeft, IconChevronRight, IconCircle, IconCopy, IconExternalLink, IconInfo, IconLanguages, IconPanelLeft, type IconProps, IconSearch, IconStar, IconThumbsDown, IconThumbsUp, IconX, IconXCircle };

package/dist/components/icons.js

@@ -0,0 +1,419 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const IconCheck = memo(function IconCheck2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+});
+const IconX = memo(function IconX2({ className, size = 24 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+});
+const IconChevronRight = memo(function IconChevronRight2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+    }
+  );
+});
+const IconChevronLeft = memo(function IconChevronLeft2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+    }
+  );
+});
+const IconChevronDown = memo(function IconChevronDown2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+});
+const IconInfo = memo(function IconInfo2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+      ]
+    }
+  );
+});
+const IconCheckCircle = memo(function IconCheckCircle2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+        /* @__PURE__ */ jsx("polyline", { points: "22 4 12 14.01 9 11.01" })
+      ]
+    }
+  );
+});
+const IconAlertCircle = memo(function IconAlertCircle2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ]
+    }
+  );
+});
+const IconXCircle = memo(function IconXCircle2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+        /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+      ]
+    }
+  );
+});
+const IconThumbsUp = memo(function IconThumbsUp2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" })
+    }
+  );
+});
+const IconThumbsDown = memo(function IconThumbsDown2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" })
+    }
+  );
+});
+const IconStar = memo(function IconStar2({
+  className,
+  size = 24,
+  fill = "none"
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill,
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })
+    }
+  );
+});
+const IconPanelLeft = memo(function IconPanelLeft2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21" })
+      ]
+    }
+  );
+});
+const IconExternalLink = memo(function IconExternalLink2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+        /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+      ]
+    }
+  );
+});
+const IconLanguages = memo(function IconLanguages2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m5 8 6 6" }),
+        /* @__PURE__ */ jsx("path", { d: "m4 14 6-6 2-3" }),
+        /* @__PURE__ */ jsx("path", { d: "M2 5h12" }),
+        /* @__PURE__ */ jsx("path", { d: "M7 2h1" }),
+        /* @__PURE__ */ jsx("path", { d: "m22 22-5-10-5 10" }),
+        /* @__PURE__ */ jsx("path", { d: "M14 18h6" })
+      ]
+    }
+  );
+});
+const IconSearch = memo(function IconSearch2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+      ]
+    }
+  );
+});
+const IconCopy = memo(function IconCopy2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+      ]
+    }
+  );
+});
+const IconCircle = memo(function IconCircle2({
+  className,
+  size = 24
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" })
+    }
+  );
+});
+
+export { IconAlertCircle, IconCheck, IconCheckCircle, IconChevronDown, IconChevronLeft, IconChevronRight, IconCircle, IconCopy, IconExternalLink, IconInfo, IconLanguages, IconPanelLeft, IconSearch, IconStar, IconThumbsDown, IconThumbsUp, IconX, IconXCircle };

package/dist/components/inlinetoc.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface TocItem {
+    id: string;
+    text: string;
+    level: number;
+}
+interface InlineTocProps {
+    items: TocItem[];
+    title?: string;
+    className?: string;
+    maxDepth?: number;
+    collapsible?: boolean;
+}
+declare function InlineTocBase({ items, title, className, maxDepth, collapsible, }: InlineTocProps): ReactNode;
+declare const InlineToc: react.MemoExoticComponent<typeof InlineTocBase>;
+
+export { InlineToc, type InlineTocProps };

package/dist/components/inlinetoc.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+function List({ items }) {
+  return /* @__PURE__ */ jsx("ul", { children: items.map((item) => /* @__PURE__ */ jsx("li", { style: { paddingLeft: `${(item.level - 2) * 1}rem` }, children: /* @__PURE__ */ jsx("a", { href: `#${item.id}`, children: item.text }) }, item.id)) });
+}
+function InlineTocBase({
+  items,
+  title = "On this page",
+  className,
+  maxDepth = 3,
+  collapsible = false
+}) {
+  const filtered = items.filter((item) => item.level <= maxDepth);
+  if (filtered.length === 0) return null;
+  const content = collapsible ? /* @__PURE__ */ jsxs("details", { children: [
+    /* @__PURE__ */ jsx("summary", { children: title }),
+    /* @__PURE__ */ jsx(List, { items: filtered })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    title && /* @__PURE__ */ jsx("strong", { children: title }),
+    /* @__PURE__ */ jsx(List, { items: filtered })
+  ] });
+  return /* @__PURE__ */ jsx("div", { className, children: content });
+}
+const InlineToc = memo(InlineTocBase);
+
+export { InlineToc };

package/dist/components/input.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type InputVariant = "default" | "error";
+type InputSize = "sm" | "md" | "lg";
+/**
+ * Props for the Input component.
+ * @property variant - visual style variant
+ * @property size - input size
+ * @property label - accessible label
+ * @property error - error message
+ * @property hint - helper text
+ * @property tooltip - help text shown on hover
+ */
+interface InputProps extends Omit<React.ComponentPropsWithRef<"input">, "size"> {
+    variant?: InputVariant;
+    size?: InputSize;
+    label?: ReactNode;
+    error?: ReactNode;
+    hint?: ReactNode;
+    tooltip?: ReactNode;
+}
+declare const Input: react.NamedExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps, type InputSize, type InputVariant };

package/dist/components/input.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, forwardRef, useId } from 'react';
+import { ErrorMessage } from './errormessage';
+import { FormLabel } from './formlabel';
+
+const variants = {
+  default: "border-line bg-surface text-fg placeholder:text-muted focus:border-accent",
+  error: "border-red-500/50 bg-red-500/5 text-fg placeholder:text-muted focus:border-red-500"
+};
+const sizes = {
+  sm: "h-8 px-2.5 text-xs",
+  md: "h-10 px-3 text-sm",
+  lg: "h-12 px-4 text-base"
+};
+function InputBase({ variant = "default", size = "md", label, error, hint, tooltip, className = "", id, ...props }, ref) {
+  const generatedId = useId();
+  const inputId = id || generatedId;
+  const errorId = error ? `${inputId}-error` : void 0;
+  const hintId = hint && !error ? `${inputId}-hint` : void 0;
+  const describedBy = errorId || hintId;
+  const actualVariant = error ? "error" : variant;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { label, tooltip, htmlFor: inputId }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id: inputId,
+        "aria-invalid": actualVariant === "error" ? true : void 0,
+        "aria-describedby": describedBy,
+        className: `rounded-md border outline-none transition-colors ${variants[actualVariant]} ${sizes[size]} ${className}`.trim(),
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ jsx(ErrorMessage, { id: errorId, children: error }),
+    hint && !error && /* @__PURE__ */ jsx("span", { id: hintId, className: "text-xs text-muted", children: hint })
+  ] });
+}
+const Input = memo(forwardRef(InputBase));
+
+export { Input };

package/dist/components/install.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { ReactElement } from 'react';
+
+interface InstallProps {
+    package: string;
+}
+declare function InstallBase({ package: pkg }: InstallProps): ReactElement;
+declare const Install: react.MemoExoticComponent<typeof InstallBase>;
+
+export { Install, type InstallProps };