@duskmoon-dev/components 0.1.2

package/dist/components/anchor/index.js

@@ -0,0 +1,240 @@
+"use client";
+
+// src/components/anchor/Anchor.tsx
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/anchor.ts
+var anchorBaseClass = "anchor";
+var anchorFixedClass = "anchor-fixed";
+var anchorInkClass = "anchor-ink";
+var anchorInkVisibleClass = "anchor-ink-visible";
+var anchorListClass = "anchor-list";
+var anchorLinkClass = "anchor-link";
+var anchorLinkActiveClass = "anchor-link-active";
+var anchorLinkTitleClass = "anchor-link-title";
+function getAnchorClasses({
+  fixed,
+  className
+}) {
+  return cn(anchorBaseClass, fixed && anchorFixedClass, className);
+}
+function getAnchorInkClasses({ visible }) {
+  return cn(anchorInkClass, visible && anchorInkVisibleClass);
+}
+function getAnchorLinkClasses({
+  active,
+  className
+}) {
+  return cn(anchorLinkClass, active && anchorLinkActiveClass, className);
+}
+
+// src/components/anchor/Anchor.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var AnchorContext = createContext(null);
+function getDefaultContainer() {
+  return typeof window === "undefined" ? undefined : window;
+}
+function getCurrentHash() {
+  return typeof window === "undefined" ? "" : window.location.hash;
+}
+function getElementFromHref(href) {
+  if (typeof document === "undefined" || !href.startsWith("#")) {
+    return null;
+  }
+  const id = decodeURIComponent(href.slice(1));
+  return id ? document.getElementById(id) : null;
+}
+function getTargetTop(container) {
+  if (!container) {
+    return 0;
+  }
+  if (typeof window !== "undefined" && container === window) {
+    return 0;
+  }
+  return container.getBoundingClientRect().top;
+}
+function normalizeActiveHref(href, getCurrentAnchor) {
+  return getCurrentAnchor ? getCurrentAnchor(href) : href;
+}
+function renderItems(items) {
+  return items.map((item) => /* @__PURE__ */ jsx(AnchorLink, {
+    href: item.href,
+    title: item.title,
+    target: item.target,
+    children: item.children?.length ? renderItems(item.children) : null
+  }, item.key ?? item.href));
+}
+var AnchorLink = forwardRef(({ href, title, target, children, className, onAuxClick, ...props }, ref) => {
+  const context = useContext(AnchorContext);
+  const active = context?.activeHref === href;
+  useEffect(() => {
+    context?.registerHref(href);
+    return () => context?.unregisterHref(href);
+  }, [context, href]);
+  function handleClick(event) {
+    context?.setActiveHref(href);
+    context?.onClick?.(event, { href, title });
+    props.onClick?.(event);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    className: getAnchorLinkClasses({ active, className }),
+    children: [
+      /* @__PURE__ */ jsx("a", {
+        ...props,
+        ref,
+        className: anchorLinkTitleClass,
+        href,
+        target,
+        "aria-current": active ? "location" : undefined,
+        onClick: handleClick,
+        onAuxClick,
+        children: title
+      }),
+      children ? /* @__PURE__ */ jsx("div", {
+        className: anchorListClass,
+        children
+      }) : null
+    ]
+  });
+});
+AnchorLink.displayName = "Anchor.Link";
+var Anchor = forwardRef(({
+  items,
+  children,
+  targetOffset,
+  bounds = 5,
+  offsetTop,
+  getContainer,
+  getCurrentAnchor,
+  affix,
+  showInkInFixed,
+  onClick,
+  onChange,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const hrefsRef = useRef([]);
+  const [activeHref, setActiveHrefState] = useState(() => normalizeActiveHref(getCurrentHash(), getCurrentAnchor));
+  const setActiveHref = useCallback((nextHref) => {
+    const normalized = normalizeActiveHref(nextHref, getCurrentAnchor);
+    setActiveHrefState((previous) => {
+      if (previous !== normalized) {
+        onChange?.(normalized);
+      }
+      return normalized;
+    });
+  }, [getCurrentAnchor, onChange]);
+  const context = useMemo(() => ({
+    activeHref,
+    onClick,
+    registerHref: (href) => {
+      if (!hrefsRef.current.includes(href)) {
+        hrefsRef.current = [...hrefsRef.current, href];
+      }
+    },
+    unregisterHref: (href) => {
+      hrefsRef.current = hrefsRef.current.filter((item) => item !== href);
+    },
+    setActiveHref
+  }), [activeHref, onClick, setActiveHref]);
+  useEffect(() => {
+    function handleHashChange() {
+      setActiveHref(getCurrentHash());
+    }
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [setActiveHref]);
+  useEffect(() => {
+    const container = getContainer?.() ?? getDefaultContainer();
+    if (!container) {
+      return;
+    }
+    function handleScroll() {
+      const threshold = targetOffset ?? offsetTop ?? 0;
+      const containerTop = getTargetTop(container);
+      const nextHref = hrefsRef.current.reduce((current, href) => {
+        const element = getElementFromHref(href);
+        if (!element) {
+          return current;
+        }
+        const top = element.getBoundingClientRect().top - containerTop;
+        return top <= threshold + bounds ? href : current;
+      }, "");
+      if (nextHref) {
+        setActiveHref(nextHref);
+      }
+    }
+    handleScroll();
+    container.addEventListener("scroll", handleScroll);
+    window.addEventListener("resize", handleScroll);
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleScroll);
+    };
+  }, [bounds, getContainer, offsetTop, setActiveHref, targetOffset]);
+  const fixed = affix !== false;
+  return /* @__PURE__ */ jsxs("nav", {
+    ...props,
+    ref,
+    className: getAnchorClasses({ fixed, className }),
+    style: {
+      position: fixed ? "fixed" : undefined,
+      top: fixed ? offsetTop : undefined,
+      ...style
+    },
+    children: [
+      showInkInFixed || !fixed ? /* @__PURE__ */ jsx("span", {
+        className: getAnchorInkClasses({ visible: Boolean(activeHref) }),
+        "aria-hidden": "true"
+      }) : null,
+      /* @__PURE__ */ jsx("div", {
+        className: anchorListClass,
+        children: /* @__PURE__ */ jsx(AnchorContext.Provider, {
+          value: context,
+          children: items ? renderItems(items) : children
+        })
+      })
+    ]
+  });
+});
+Anchor.displayName = "Anchor";
+Anchor.Link = AnchorLink;
+export {
+  AnchorLink,
+  Anchor
+};

package/dist/components/app/App.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { AppComponent } from "./App.types";
+export declare const AppContext: React.Context<import("./App.types").AppInstance>;
+export declare const App: AppComponent;
+export declare function AppRoot({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/components/app/App.types.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentProps, Context, ElementType, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+import type { MessageApi } from "../message";
+import type { ModalComponent } from "../modal";
+import type { NotificationApi } from "../notification";
+export interface AppInstance {
+    message: MessageApi;
+    notification: NotificationApi;
+    modal: ModalComponent;
+}
+export type AppContextValue = AppInstance;
+export interface AppProps extends Omit<ComponentProps<"div">, "children" | "className"> {
+    children?: ReactNode;
+    className?: string;
+    component?: false | ElementType;
+    message?: {
+        maxCount?: number;
+        duration?: number;
+    };
+    notification?: {
+        maxCount?: number;
+        duration?: number | null;
+    };
+}
+export interface AppComponent extends ForwardRefExoticComponent<AppProps & RefAttributes<HTMLElement>> {
+    useApp: () => AppInstance;
+    Context: Context<AppContextValue>;
+}

package/dist/components/app/index.d.ts

@@ -0,0 +1,2 @@
+export { App, AppContext, AppRoot } from "./App";
+export type { AppComponent, AppContextValue, AppInstance, AppProps, } from "./App.types";