opin-ui 0.0.1

package/dist/layouts/shared/slots/theme-switch.js

@@ -0,0 +1,65 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Airplay, Moon, Sun } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { useEffect, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+import { useTheme } from "next-themes";
+//#region src/layouts/shared/slots/theme-switch.tsx
+const itemVariants = cva("size-6.5 p-1.5 text-fd-muted-foreground", { variants: { active: {
+	true: "bg-fd-accent text-fd-accent-foreground",
+	false: "text-fd-muted-foreground"
+} } });
+const full = [
+	["light", Sun],
+	["dark", Moon],
+	["system", Airplay]
+];
+function ThemeSwitch({ className, mode = "light-dark", ...props }) {
+	const { setTheme, theme, resolvedTheme } = useTheme();
+	const [mounted, setMounted] = useState(false);
+	const t = useTranslations({ note: "theme switcher" });
+	const themeAriaLabels = {
+		light: t("Light", { note: "aria-label" }),
+		dark: t("Dark", { note: "aria-label" }),
+		system: t("System", { note: "aria-label" })
+	};
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	const container = cn("inline-flex items-center rounded-full border p-1 overflow-hidden *:rounded-full", className);
+	if (mode === "light-dark") {
+		const value = mounted ? resolvedTheme : null;
+		return /* @__PURE__ */ jsx("button", {
+			className: container,
+			"aria-label": t("Toggle Theme", { note: "aria-label" }),
+			onClick: () => setTheme(value === "light" ? "dark" : "light"),
+			"data-theme-toggle": "",
+			children: full.map(([key, Icon]) => {
+				if (key === "system") return;
+				return /* @__PURE__ */ jsx(Icon, {
+					fill: "currentColor",
+					className: cn(itemVariants({ active: value === key }))
+				}, key);
+			})
+		});
+	}
+	const value = mounted ? theme : null;
+	return /* @__PURE__ */ jsx("div", {
+		className: container,
+		"data-theme-toggle": "",
+		...props,
+		children: full.map(([key, Icon]) => /* @__PURE__ */ jsx("button", {
+			"aria-label": themeAriaLabels[key],
+			className: cn(itemVariants({ active: value === key })),
+			onClick: () => setTheme(key),
+			children: /* @__PURE__ */ jsx(Icon, {
+				className: "size-full",
+				fill: "currentColor"
+			})
+		}, key))
+	});
+}
+//#endregion
+export { ThemeSwitch };

package/dist/legacy/layout.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+
+//#region src/legacy/layout.d.ts
+interface PageStyles {
+  tocNav?: string;
+  toc?: string;
+  page?: string;
+  article?: string;
+}
+declare function usePageStyles(): PageStyles;
+declare function StylesProvider({
+  children,
+  ...value
+}: PageStyles & {
+  children: ReactNode;
+}): import("react").JSX.Element;
+interface NavProviderProps {
+  /**
+   * Use transparent background
+   *
+   * @defaultValue none
+   */
+  transparentMode?: 'always' | 'top' | 'none';
+}
+interface NavContextType {
+  isTransparent: boolean;
+}
+declare function NavProvider({
+  transparentMode,
+  children
+}: NavProviderProps & {
+  children: ReactNode;
+}): import("react").JSX.Element;
+declare function useNav(): NavContextType;
+//#endregion
+export { NavProvider, NavProviderProps, PageStyles, StylesProvider, useNav, usePageStyles };

package/dist/legacy/layout.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use, useEffect, useMemo, useState } from "react";
+//#region src/legacy/layout.tsx
+/**
+* applied styles to different layout components in `Page` from layouts
+*/
+const StylesContext = createContext({
+	tocNav: "xl:hidden",
+	toc: "max-xl:hidden"
+});
+function usePageStyles() {
+	return use(StylesContext);
+}
+function StylesProvider({ children, ...value }) {
+	return /* @__PURE__ */ jsx(StylesContext.Provider, {
+		value,
+		children
+	});
+}
+const NavContext = createContext({ isTransparent: false });
+function NavProvider({ transparentMode = "none", children }) {
+	const [transparent, setTransparent] = useState(transparentMode !== "none");
+	useEffect(() => {
+		if (transparentMode !== "top") return;
+		const listener = () => {
+			setTransparent(window.scrollY < 10);
+		};
+		listener();
+		window.addEventListener("scroll", listener);
+		return () => {
+			window.removeEventListener("scroll", listener);
+		};
+	}, [transparentMode]);
+	return /* @__PURE__ */ jsx(NavContext, {
+		value: useMemo(() => ({ isTransparent: transparent }), [transparent]),
+		children
+	});
+}
+function useNav() {
+	return use(NavContext);
+}
+//#endregion
+export { NavProvider, StylesProvider, useNav, usePageStyles };

package/dist/legacy/sidebar.d.ts

@@ -0,0 +1,17 @@
+import { Dispatch, ReactNode, RefObject, SetStateAction } from "react";
+
+//#region src/legacy/sidebar.d.ts
+declare function useSidebar(): {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  collapsed: boolean;
+  setCollapsed: Dispatch<SetStateAction<boolean>>;
+  closeOnRedirect: RefObject<boolean>;
+};
+declare function SidebarProvider({
+  children
+}: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+export { SidebarProvider, useSidebar };

package/dist/legacy/sidebar.js

@@ -0,0 +1,33 @@
+"use client";
+import { usePathname } from "fumadocs-core/framework";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use, useMemo, useRef, useState } from "react";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+//#region src/legacy/sidebar.tsx
+const SidebarContext = createContext(null);
+function useSidebar() {
+	const ctx = use(SidebarContext);
+	if (!ctx) throw new Error("the component must be wrapped under <SidebarProvider /> (opin-ui/legacy/sidebar)");
+	return ctx;
+}
+function SidebarProvider({ children }) {
+	const [open, setOpen] = useState(false);
+	const [collapsed, setCollapsed] = useState(false);
+	const closeOnRedirect = useRef(true);
+	useOnChange(usePathname(), () => {
+		if (closeOnRedirect.current) setOpen(false);
+		else closeOnRedirect.current = true;
+	});
+	return /* @__PURE__ */ jsx(SidebarContext, {
+		value: useMemo(() => ({
+			closeOnRedirect,
+			collapsed,
+			open,
+			setCollapsed,
+			setOpen
+		}), [open, collapsed]),
+		children
+	});
+}
+//#endregion
+export { SidebarProvider, useSidebar };

package/dist/mdx.d.ts

@@ -0,0 +1,45 @@
+import { Callout, CalloutContainer, CalloutDescription, CalloutTitle } from "./components/callout.js";
+import { Card, Cards } from "./components/card.js";
+import { CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger } from "./components/codeblock.js";
+import { createRelativeLink as createRelativeLink$1 } from "./mdx.server.js";
+import React, { AnchorHTMLAttributes, FC, HTMLAttributes, ImgHTMLAttributes, TableHTMLAttributes } from "react";
+
+//#region src/mdx.d.ts
+/**
+ * global types for MDX.js
+ */
+declare module 'mdx/types.js' {
+  namespace JSX {
+    type Element = React.JSX.Element;
+    type ElementClass = React.JSX.ElementClass;
+    type ElementType = React.JSX.ElementType;
+    type IntrinsicElements = React.JSX.IntrinsicElements;
+  }
+}
+declare function Image(props: ImgHTMLAttributes<HTMLImageElement>): React.JSX.Element;
+declare function Table(props: TableHTMLAttributes<HTMLTableElement>): React.JSX.Element;
+declare const defaultMdxComponents: {
+  CodeBlockTab: typeof CodeBlockTab;
+  CodeBlockTabs: typeof CodeBlockTabs;
+  CodeBlockTabsList: typeof CodeBlockTabsList;
+  CodeBlockTabsTrigger: typeof CodeBlockTabsTrigger;
+  pre: (props: HTMLAttributes<HTMLPreElement>) => React.JSX.Element;
+  Card: typeof Card;
+  Cards: typeof Cards;
+  a: FC<AnchorHTMLAttributes<HTMLAnchorElement>>;
+  img: typeof Image;
+  h1: (props: HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+  h2: (props: HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+  h3: (props: HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+  h4: (props: HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+  h5: (props: HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+  h6: (props: HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+  table: typeof Table;
+  Callout: typeof Callout;
+  CalloutContainer: typeof CalloutContainer;
+  CalloutTitle: typeof CalloutTitle;
+  CalloutDescription: typeof CalloutDescription;
+};
+declare const createRelativeLink: typeof createRelativeLink$1;
+//#endregion
+export { createRelativeLink, defaultMdxComponents as default };

package/dist/mdx.js

@@ -0,0 +1,70 @@
+import { cn } from "./utils/cn.js";
+import { Card, Cards } from "./components/card.js";
+import { Callout, CalloutContainer, CalloutDescription, CalloutTitle } from "./components/callout.js";
+import { Heading } from "./components/heading.js";
+import { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre } from "./components/codeblock.js";
+import Link from "fumadocs-core/link";
+import { Image } from "fumadocs-core/framework";
+import { jsx } from "react/jsx-runtime";
+//#region src/mdx.tsx
+function Image$1(props) {
+	return /* @__PURE__ */ jsx(Image, {
+		sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px",
+		...props,
+		className: cn("rounded-lg", props.className)
+	});
+}
+function Table(props) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative overflow-auto prose-no-margin my-6",
+		children: /* @__PURE__ */ jsx("table", { ...props })
+	});
+}
+const defaultMdxComponents = {
+	CodeBlockTab,
+	CodeBlockTabs,
+	CodeBlockTabsList,
+	CodeBlockTabsTrigger,
+	pre: (props) => /* @__PURE__ */ jsx(CodeBlock, {
+		...props,
+		children: /* @__PURE__ */ jsx(Pre, { children: props.children })
+	}),
+	Card,
+	Cards,
+	a: Link,
+	img: Image$1,
+	h1: (props) => /* @__PURE__ */ jsx(Heading, {
+		as: "h1",
+		...props
+	}),
+	h2: (props) => /* @__PURE__ */ jsx(Heading, {
+		as: "h2",
+		...props
+	}),
+	h3: (props) => /* @__PURE__ */ jsx(Heading, {
+		as: "h3",
+		...props
+	}),
+	h4: (props) => /* @__PURE__ */ jsx(Heading, {
+		as: "h4",
+		...props
+	}),
+	h5: (props) => /* @__PURE__ */ jsx(Heading, {
+		as: "h5",
+		...props
+	}),
+	h6: (props) => /* @__PURE__ */ jsx(Heading, {
+		as: "h6",
+		...props
+	}),
+	table: Table,
+	Callout,
+	CalloutContainer,
+	CalloutTitle,
+	CalloutDescription
+};
+const createRelativeLink = () => {
+	throw new Error("`createRelativeLink` is only supported in Node.js environment");
+};
+//#endregion
+export { createRelativeLink, defaultMdxComponents as default };

package/dist/mdx.server.d.ts

@@ -0,0 +1,15 @@
+import defaultMdxComponents from "./mdx.js";
+import { ComponentProps, FC } from "react";
+import { LoaderConfig, LoaderOutput, Page } from "fumadocs-core/source";
+
+//#region src/mdx.server.d.ts
+/**
+ * Extend the default Link component to resolve relative file paths in `href`.
+ *
+ * @param page the current page
+ * @param source the source object
+ * @param OverrideLink The component to override from
+ */
+declare function createRelativeLink<C extends LoaderConfig>(source: LoaderOutput<C>, page: Page | C['page'], OverrideLink?: FC<ComponentProps<'a'>>): FC<ComponentProps<'a'>>;
+//#endregion
+export { createRelativeLink, defaultMdxComponents as default };

package/dist/mdx.server.js

@@ -0,0 +1,20 @@
+import defaultMdxComponents from "./mdx.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/mdx.server.tsx
+/**
+* Extend the default Link component to resolve relative file paths in `href`.
+*
+* @param page the current page
+* @param source the source object
+* @param OverrideLink The component to override from
+*/
+function createRelativeLink(source, page, OverrideLink = defaultMdxComponents.a) {
+	return async function RelativeLink({ href, ...props }) {
+		return /* @__PURE__ */ jsx(OverrideLink, {
+			href: href ? source.resolveHref(href, page) : href,
+			...props
+		});
+	};
+}
+//#endregion
+export { createRelativeLink, defaultMdxComponents as default };

package/dist/node_modules/.bun/react-medium-image-zoom@5.4.8_7492c01c6988791b/node_modules/react-medium-image-zoom/dist/controlled.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+
+//#region ../../node_modules/.bun/react-medium-image-zoom@5.4.8+7492c01c6988791b/node_modules/react-medium-image-zoom/dist/controlled.d.ts
+type ModalState = 'LOADED' | 'LOADING' | 'UNLOADED' | 'UNLOADING';
+interface ControlledProps {
+  a11yNameButtonUnzoom?: string;
+  a11yNameButtonZoom?: string;
+  canSwipeToUnzoom?: boolean;
+  children: React.ReactNode;
+  classDialog?: string;
+  IconUnzoom?: React.ElementType;
+  IconZoom?: React.ElementType;
+  isDisabled?: boolean;
+  isZoomed: boolean;
+  onZoomChange?: (value: boolean, data: {
+    event: React.SyntheticEvent | Event;
+  }) => void;
+  swipeToUnzoomThreshold?: number;
+  wrapElement?: 'div' | 'span';
+  ZoomContent?: (data: {
+    buttonUnzoom: React.ReactElement<HTMLButtonElement>;
+    img: React.ReactElement | null;
+    isZoomImgLoaded: boolean;
+    modalState: ModalState;
+    onUnzoom: (e: Event) => void;
+  }) => React.ReactElement;
+  zoomImg?: React.ImgHTMLAttributes<HTMLImageElement>;
+  zoomMargin?: number;
+}
+//#endregion
+export { ControlledProps };