@theguild/components 9.11.2 → 9.12.0-alpha-20251204002326-2a985828907ff904a08269604e8ed510d0fd16c4

package/dist/components/legacy-package-cmd.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Pre, Tabs } from "nextra/components";
+import { Pre } from "nextra/components";
+import { Tabs } from "./tabs";
 const PACKAGE_MANAGERS = ["yarn", "npm", "pnpm"];
 const Add = {
   yarn: "yarn add",

package/dist/components/marketplace-search.js

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isValidElement, useMemo, useState } from "react";
 import fuzzy from "fuzzy";
-import { Tabs } from "nextra/components";
+import { Tabs } from "./tabs";
 import { cn } from "../cn";
 import { Heading } from "./heading";
 import { CloseIcon, SearchIcon } from "./icons";

package/dist/components/tabs/index.client.d.mts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactElement, ReactNode, FC } from 'react';
+import { TabGroupProps, TabListProps, TabProps, TabPanelProps } from '@headlessui/react';
+
+type TabItem = string | ReactElement;
+type TabObjectItem = {
+    key?: string;
+    label: TabItem;
+    disabled: boolean;
+};
+interface TabsProps extends Pick<TabGroupProps, 'defaultIndex' | 'selectedIndex' | 'onChange'> {
+    items: (TabItem | TabObjectItem)[];
+    children: ReactNode;
+    /**
+     * URLSearchParams key for persisting the selected tab.
+     * @default "tab"
+     */
+    searchParamKey?: string;
+    /** LocalStorage key for persisting the selected tab. */
+    storageKey?: string;
+    /** Tabs CSS class name. */
+    className?: TabListProps['className'];
+    /** Tab CSS class name. */
+    tabClassName?: TabProps['className'];
+}
+declare const Tabs: ({ items, children, searchParamKey, storageKey, defaultIndex, selectedIndex: _selectedIndex, onChange, className, tabClassName, }: TabsProps) => react_jsx_runtime.JSX.Element;
+declare const Tab: FC<TabPanelProps>;
+
+export { Tab, Tabs, type TabsProps };

package/dist/components/tabs/index.client.js

@@ -0,0 +1,214 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Fragment,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { useSearchParams } from "next/navigation";
+import cn from "clsx";
+import {
+  Tab as HeadlessTab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels
+} from "@headlessui/react";
+import { useHash } from "../use-hash";
+function isTabObjectItem(item) {
+  return !!item && typeof item === "object" && "label" in item;
+}
+const Tabs = ({
+  items,
+  children,
+  searchParamKey = "tab",
+  storageKey,
+  defaultIndex = 0,
+  selectedIndex: _selectedIndex,
+  onChange,
+  className,
+  tabClassName
+}) => {
+  const id = useId();
+  storageKey ??= `tabs-${id}`;
+  let [selectedIndex, setSelectedIndex] = useState(defaultIndex);
+  if (_selectedIndex !== void 0) {
+    selectedIndex = _selectedIndex;
+  }
+  const tabPanelsRef = useRef(null);
+  const tabIndexFromSearchParams = useActiveTabFromURL(
+    tabPanelsRef,
+    items,
+    searchParamKey,
+    setSelectedIndex,
+    id
+  );
+  useActiveTabFromStorage(storageKey, items, setSelectedIndex, tabIndexFromSearchParams !== -1, id);
+  const handleChange = (index) => {
+    onChange?.(index);
+    if (storageKey) {
+      const newValue = getTabKey(items, index, id);
+      localStorage.setItem(storageKey, newValue);
+      window.dispatchEvent(new StorageEvent("storage", { key: storageKey, newValue }));
+    } else {
+      setSelectedIndex(index);
+    }
+    if (searchParamKey) {
+      const searchParams = new URLSearchParams(window.location.search);
+      searchParams.set(searchParamKey, getTabKey(items, index, id));
+      window.history.replaceState(
+        null,
+        "",
+        `${window.location.pathname}?${searchParams.toString()}`
+      );
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    TabGroup,
+    {
+      selectedIndex,
+      defaultIndex,
+      onChange: handleChange,
+      as: Fragment,
+      children: [
+        /* @__PURE__ */ jsx(
+          TabList,
+          {
+            className: (args) => cn(
+              "nextra-scrollbar overflow-x-auto overflow-y-hidden overscroll-x-contain",
+              "mt-4 flex w-full gap-2 border-b border-beige-200 pb-px dark:border-neutral-800",
+              "focus-visible:hive-focus",
+              typeof className === "function" ? className(args) : className
+            ),
+            children: items.map((item, index) => /* @__PURE__ */ jsx(
+              HeadlessTab,
+              {
+                disabled: isTabObjectItem(item) && item.disabled,
+                className: (args) => {
+                  const { selected, disabled, hover, focus } = args;
+                  return cn(
+                    focus && "hive-focus ring-inset",
+                    "cursor-pointer whitespace-nowrap",
+                    "rounded-t p-2 font-medium leading-5 transition-colors",
+                    "-mb-0.5 select-none border-b-2",
+                    selected ? "border-current outline-none" : hover ? "border-beige-200 dark:border-neutral-800" : "border-transparent",
+                    selected ? "text-green-900 dark:text-primary" : disabled ? "pointer-events-none text-beige-400 dark:text-neutral-600" : hover ? "text-black dark:text-white" : "text-beige-600 dark:text-beige-200",
+                    typeof tabClassName === "function" ? tabClassName(args) : tabClassName
+                  );
+                },
+                children: isTabObjectItem(item) ? item.label : item
+              },
+              index
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(TabPanels, { ref: tabPanelsRef, children })
+      ]
+    }
+  );
+};
+const Tab = ({
+  children,
+  // For SEO display all the Panel in the DOM and set `display: none;` for those that are not selected
+  unmount = false,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    TabPanel,
+    {
+      ...props,
+      unmount,
+      className: (args) => cn(
+        "mt-[1.25em] rounded",
+        args.focus && "hive-focus",
+        typeof className === "function" ? className(args) : className
+      ),
+      children
+    }
+  );
+};
+function useActiveTabFromURL(tabPanelsRef, items, searchParamKey, setSelectedIndex, id) {
+  const hash = useHash();
+  const searchParams = useSearchParams();
+  const tabsInSearchParams = searchParams.getAll(searchParamKey).sort();
+  const tabIndexFromSearchParams = items.findIndex(
+    (_, index) => tabsInSearchParams.includes(getTabKey(items, index, id))
+  );
+  useIsomorphicLayoutEffect(() => {
+    const tabPanel = hash ? tabPanelsRef.current?.querySelector(`[role=tabpanel]:has([id="${hash}"])`) : null;
+    if (tabPanel) {
+      let index = 0;
+      for (const el of tabPanelsRef.current.children) {
+        if (el === tabPanel) {
+          setSelectedIndex(Number(index));
+          location.hash = "";
+          requestAnimationFrame(() => location.hash = `#${hash}`);
+        }
+        index++;
+      }
+    } else if (tabIndexFromSearchParams !== -1) {
+      setSelectedIndex(tabIndexFromSearchParams);
+    }
+    return function cleanUpTabFromSearchParams() {
+      const newSearchParams = new URLSearchParams(window.location.search);
+      newSearchParams.delete(searchParamKey);
+      window.history.replaceState(
+        null,
+        "",
+        `${window.location.pathname}?${newSearchParams.toString()}`
+      );
+    };
+  }, [hash, tabsInSearchParams.join(",")]);
+  return tabIndexFromSearchParams;
+}
+function useActiveTabFromStorage(storageKey, items, setSelectedIndex, ignoreLocalStorage, id) {
+  useIsomorphicLayoutEffect(() => {
+    if (!storageKey || ignoreLocalStorage) {
+      return;
+    }
+    const setSelectedTab = (key) => {
+      const index = items.findIndex((_, i) => getTabKey(items, i, id) === key);
+      if (index !== -1) {
+        setSelectedIndex(index);
+      }
+    };
+    function onStorageChange(event) {
+      if (event.key === storageKey) {
+        const value2 = event.newValue;
+        if (value2) {
+          setSelectedTab(value2);
+        }
+      }
+    }
+    const value = localStorage.getItem(storageKey);
+    if (value) {
+      setSelectedTab(value);
+    }
+    window.addEventListener("storage", onStorageChange);
+    return () => {
+      window.removeEventListener("storage", onStorageChange);
+    };
+  }, [storageKey]);
+}
+function getTabKey(items, index, prefix) {
+  const item = items[index];
+  const isObject = isTabObjectItem(item);
+  if (isObject && item.key) {
+    return item.key;
+  }
+  const label = isObject ? item.label : item;
+  const key = typeof label === "string" ? slugify(label) : `${prefix}-${index.toString()}`;
+  return key;
+}
+function slugify(label) {
+  return label.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export {
+  Tab,
+  Tabs
+};

package/dist/components/tabs/index.d.mts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as _headlessui_react from '@headlessui/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tabs as Tabs$1 } from './index.client.mjs';
+export { TabsProps } from './index.client.mjs';
+
+/**
+ * A built-in component for creating tabbed content, helping organize related information in a
+ * compact, interactive layout.
+ *
+ * @example
+ * <Tabs items={['pnpm', 'npm', 'yarn']}>
+ *   <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
+ *   <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
+ *   <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
+ * </Tabs>
+ *
+ * @usage
+ * ```mdx
+ * import { Tabs } from '@theguild/components'
+ *
+ * <Tabs items={['pnpm', 'npm', 'yarn']}>
+ *   <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
+ *   <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
+ *   <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
+ * </Tabs>
+ * ```
+ *
+ * ### Default Selected Index
+ *
+ * You can use the `defaultIndex` prop to set the default tab index:
+ *
+ * ```mdx /defaultIndex="1"/
+ * import { Tabs } from '@theguild/components'
+ *
+ * <Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
+ *   ...
+ * </Tabs>
+ * ```
+ *
+ * And you will have `npm` as the default tab:
+ *
+ * <Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
+ *   <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
+ *   <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
+ *   <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
+ * </Tabs>
+ */
+declare const Tabs: ((props: ComponentProps<typeof Tabs$1>) => react_jsx_runtime.JSX.Element) & {
+    Tab: react.FC<_headlessui_react.TabPanelProps>;
+};
+
+export { Tabs };

package/dist/components/tabs/index.js

@@ -0,0 +1,9 @@
+"use no memo";
+import { jsx } from "react/jsx-runtime";
+import { Tabs as _Tabs, Tab } from "./index.client";
+const Tabs = Object.assign((props) => /* @__PURE__ */ jsx(_Tabs, { ...props }), {
+  Tab
+});
+export {
+  Tabs
+};

package/dist/components/use-hash.d.mts

@@ -0,0 +1,3 @@
+declare function useHash(): string;
+
+export { useHash };

package/dist/components/use-hash.js

@@ -0,0 +1,16 @@
+"use client";
+"use no memo";
+import { useEffect, useState } from "react";
+function useHash() {
+  const [hash, setHash] = useState("");
+  useEffect(() => {
+    const handleHashChange = () => setHash(location.hash.replace("#", ""));
+    handleHashChange();
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, []);
+  return hash;
+}
+export {
+  useHash
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theguild/components",
-  "version": "9.11.2",
+  "version": "9.12.0-alpha-20251204002326-2a985828907ff904a08269604e8ed510d0fd16c4",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"
@@ -41,7 +41,8 @@
     "@theguild/tailwind-config": "^0.6.3",
     "next": "^13 || ^14 || ^15.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@headlessui/react": "2.2.0"
   },
   "dependencies": {
     "@giscus/react": "3.1.0",