wpheadless-lib 1.1.10 → 1.1.12

package/dist/components/layout/Footer/index.d.ts

@@ -1,14 +1,14 @@
-import type { LogoProps } from "../types";
+import type { LogoProps } from "../types.js";
 export declare const dynamic = "force-static";
 export declare const revalidate = 3600;
 type FooterProps = {
-    menuId: string;
-    wpApiUrl: string;
-    wpUsername: string;
-    wpAppPassword: string;
+    menuId?: string;
+    wpApiUrl?: string;
+    wpUsername?: string;
+    wpAppPassword?: string;
     siteName: string;
     locale?: string;
     logo?: LogoProps;
 };
-export default function Footer({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, locale, logo, }: FooterProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export default function Footer({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, locale, logo, }: FooterProps): Promise<import("react").JSX.Element>;
 export {};

package/dist/components/layout/Footer/index.js

@@ -1,23 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { createMenuEndpoints, createAuth } from "wpjsapi-lib";
-import { convertWpUrl, getTranslator } from "../../../utils";
+import { getTranslator } from "../../../utils/index.js";
+import { fetchMenuLinks } from "../../../api/menus.js";
 import styles from "./index.module.css";
 export const dynamic = "force-static";
 export const revalidate = 3600;
 export default async function Footer({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, locale, logo, }) {
-    const auth = createAuth({
-        method: "basic",
-        credentials: {
-            username: wpUsername,
-            password: wpAppPassword,
-        },
-    });
-    const menusApi = createMenuEndpoints({
-        baseUrl: wpApiUrl,
-        auth,
-    });
-    let menuItems = [];
+    let menuLinks = [];
     const t = getTranslator(locale);
     const logoData = logo?.src ? logo : null;
     const logoAlt = logoData?.alt || siteName;
@@ -28,17 +17,17 @@ export default async function Footer({ menuId, wpApiUrl, wpUsername, wpAppPasswo
         }
         : undefined;
     try {
-        const parsedMenuId = parseInt(menuId);
-        const itemsResponse = await menusApi.items.list({
-            menus: [parsedMenuId],
-            per_page: 100,
-            orderby: "menu_order",
-            order: "asc",
+        menuLinks = await fetchMenuLinks({
+            baseApiUrl: wpApiUrl || "",
+            menuId,
+            username: wpUsername,
+            appPassword: wpAppPassword,
         });
-        menuItems = itemsResponse.items;
     }
     catch (e) {
         console.error("Error obteniendo menú footer:", e);
     }
-    return (_jsx("footer", { className: styles.footer, children: _jsx("div", { className: "container", children: _jsxs("div", { className: styles.wrapper, children: [_jsxs("div", { className: styles.grid, children: [_jsxs("div", { children: [_jsx("h3", { className: styles.siteName, children: logoData ? (_jsx("img", { src: logoData.src, alt: logoAlt, className: styles.logoImage, width: logoData.width, height: logoData.height, style: logoStyle })) : (siteName) }), _jsx("p", { className: `${styles.muted} text-muted`, children: t("footer.tagline") })] }), menuItems.length > 0 && (_jsxs("nav", { "aria-label": t("footer.navAria"), className: styles.nav, children: [_jsx("h4", { className: styles.navTitle, children: t("footer.navTitle") }), _jsx("ul", { className: styles.list, children: menuItems.map((item) => (_jsx("li", { children: _jsx(Link, { href: convertWpUrl(item.url, wpApiUrl), className: "footer-link", children: item.title.rendered }) }, item.id))) })] }))] }), _jsxs("div", { className: styles.bottomBar, children: [_jsxs("span", { children: ["\u00A9 ", new Date().getFullYear(), " ", siteName] }), _jsx("span", { children: t("footer.noCookies") })] })] }) }) }));
+    return (_jsx("footer", { className: styles.footer, children: _jsx("div", { className: styles.container, children: _jsxs("div", { className: styles.wrapper, children: [_jsxs("div", { className: styles.grid, children: [_jsxs("div", { children: [_jsx("div", { className: styles.siteName, children: logoData ? (_jsx("img", { src: logoData.src, alt: logoAlt, className: styles.logoImage, width: logoData.width, height: logoData.height, style: logoStyle })) : (siteName) }), _jsx("p", { className: `${styles.muted} text-muted`, children: t("footer.tagline") })] }), menuLinks.length > 0 && (_jsxs("nav", { "aria-label": t("footer.navAria"), className: styles.nav, children: [_jsx("h4", { className: styles.navTitle, children: t("footer.navTitle") }), _jsx("ul", { className: styles.list, children: menuLinks.map((item) => (_jsx("li", { children: _jsx(Link, { href: item.href, className: styles.footerLink, target: item.target || undefined, rel: item.target === "_blank"
+                                                    ? "noopener noreferrer"
+                                                    : undefined, children: item.label }) }, item.id))) })] }))] }), _jsxs("div", { className: styles.bottomBar, children: [_jsxs("span", { children: ["\u00A9 ", new Date().getFullYear(), " ", siteName] }), _jsx("span", { children: t("footer.noCookies") })] })] }) }) }));
 }

package/dist/components/layout/Footer/index.module.css

@@ -1,18 +1,28 @@
 .footer {
-  background: var(--background-alt);
-  border-top: 1px solid var(--border);
+  background:
+    linear-gradient(180deg, transparent, color-mix(in srgb, var(--background-alt) 82%, transparent) 28%),
+    var(--background-alt);
+  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
   margin-top: var(--spacing-xl);
 }
 
+.container {
+  width: 100%;
+  max-width: var(--container-width);
+  margin: 0 auto;
+  padding-inline: clamp(1rem, 4vw, 2rem);
+}
+
 .wrapper {
-  padding: var(--spacing-xl) 0 var(--spacing-lg);
+  padding: clamp(2.25rem, 5vw, 3.5rem) 0 var(--spacing-lg);
 }
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--spacing-lg);
-  margin-bottom: var(--spacing-lg);
+  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr);
+  gap: clamp(2rem, 7vw, 5rem);
+  align-items: start;
+  margin-bottom: clamp(2rem, 4vw, 3rem);
 }
 
 .siteName {
@@ -25,18 +35,22 @@
 }
 
 .logoImage {
-  height: 64px;
+  height: 56px;
   width: auto;
   display: block;
   object-fit: contain;
 }
 
 .muted {
-  font-size: 0.875rem;
+  max-width: 36rem;
+  font-size: 0.95rem;
+  line-height: 1.7;
 }
 
 .nav {
   display: block;
+  justify-self: end;
+  min-width: min(100%, 240px);
 }
 
 .navTitle {
@@ -52,11 +66,31 @@
   list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.35rem;
   margin: 0;
   padding: 0;
 }
 
+.footerLink {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  border-radius: 0.65rem;
+  padding: 0.45rem 0.65rem;
+  color: var(--foreground-light);
+  font-size: 0.92rem;
+  font-weight: 550;
+  text-decoration: none;
+  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+
+.footerLink:hover,
+.footerLink:focus-visible {
+  background: color-mix(in srgb, var(--primary) 10%, transparent);
+  color: var(--primary);
+  transform: translateX(2px);
+}
+
 .bottomBar {
   display: flex;
   justify-content: space-between;
@@ -68,3 +102,19 @@
   gap: var(--spacing-md);
   flex-wrap: wrap;
 }
+
+@media (max-width: 760px) {
+  .grid {
+    grid-template-columns: 1fr;
+    gap: 1.75rem;
+  }
+
+  .nav {
+    justify-self: stretch;
+  }
+
+  .bottomBar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}

package/dist/components/layout/Header/HeaderClient.d.ts

@@ -1,4 +1,4 @@
-import type { LogoProps } from "../types";
+import type { LogoProps } from "../types.js";
 type MenuLink = {
     id: number;
     href: string;
@@ -17,5 +17,5 @@ type HeaderClientProps = {
     labels: HeaderLabels;
     logo?: LogoProps;
 };
-export default function HeaderClient({ menuLinks, siteName, homeHref, labels, logo, }: HeaderClientProps): import("react/jsx-runtime").JSX.Element;
+export default function HeaderClient({ menuLinks, siteName, homeHref, labels, logo, }: HeaderClientProps): import("react").JSX.Element;
 export {};

package/dist/components/layout/Header/HeaderClient.js

@@ -1,11 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import styles from "./index.module.css";
+import { Button } from "../../ui/index.js";
 export default function HeaderClient({ menuLinks, siteName, homeHref, labels, logo, }) {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [isMobileView, setIsMobileView] = useState(false);
+    const menuButtonRef = useRef(null);
+    const navRef = useRef(null);
     useEffect(() => {
         const handleResize = () => {
             const isMobile = window.innerWidth < 900;
@@ -18,6 +21,23 @@ export default function HeaderClient({ menuLinks, siteName, homeHref, labels, lo
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
     }, []);
+    useEffect(() => {
+        if (!isMenuOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key !== "Escape")
+                return;
+            setIsMenuOpen(false);
+            menuButtonRef.current?.focus();
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [isMenuOpen]);
+    useEffect(() => {
+        if (!isMenuOpen || !isMobileView)
+            return;
+        navRef.current?.querySelector("a")?.focus();
+    }, [isMenuOpen, isMobileView]);
     const toggleMenu = () => setIsMenuOpen((prev) => !prev);
     const handleLinkClick = () => setIsMenuOpen(false);
     const menuLabel = isMenuOpen ? labels.closeMenu : labels.openMenu;
@@ -29,7 +49,7 @@ export default function HeaderClient({ menuLinks, siteName, homeHref, labels, lo
             ...(logoData.width ? { width: logoData.width } : {}),
         }
         : undefined;
-    return (_jsxs("div", { className: styles.inner, children: [_jsx(Link, { href: homeHref, className: styles.logo, children: logoData ? (_jsx("img", { src: logoData.src, alt: logoAlt, className: styles.logoImage, width: logoData.width, height: logoData.height, style: logoStyle })) : (siteName) }), menuLinks.length > 0 && (_jsxs("div", { className: styles.navWrapper, children: [_jsxs("button", { type: "button", className: styles.menuButton, "aria-expanded": isMenuOpen, "aria-controls": "primary-navigation", "aria-label": menuLabel, onClick: toggleMenu, children: [_jsxs("span", { className: styles.menuIcon, "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsx("span", { className: styles.menuText, children: menuLabel })] }), _jsx("nav", { id: "primary-navigation", "aria-label": labels.navAria, className: `${styles.nav} ${isMenuOpen ? styles.navOpen : ""}`, "aria-hidden": !isMenuOpen && isMobileView, hidden: !isMenuOpen && isMobileView, children: _jsx("ul", { className: styles.list, children: menuLinks.map((item) => (_jsx("li", { children: _jsx(Link, { href: item.href, className: "header-link", onClick: handleLinkClick, target: item.target || undefined, rel: item.target === "_blank"
+    return (_jsxs("div", { className: styles.inner, children: [_jsx(Link, { href: homeHref, className: styles.logo, children: logoData ? (_jsx("img", { src: logoData.src, alt: logoAlt, className: styles.logoImage, width: logoData.width, height: logoData.height, style: logoStyle })) : (siteName) }), menuLinks.length > 0 && (_jsxs("div", { className: styles.navWrapper, children: [_jsxs(Button, { type: "button", variant: "ghost", className: styles.menuButton, ref: menuButtonRef, "aria-expanded": isMenuOpen, "aria-controls": "primary-navigation", "aria-label": menuLabel, onClick: toggleMenu, children: [_jsxs("span", { className: styles.menuIcon, "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsx("span", { className: styles.menuText, children: menuLabel })] }), _jsx("nav", { id: "primary-navigation", ref: navRef, "aria-label": labels.navAria, className: `${styles.nav} ${isMenuOpen ? styles.navOpen : ""}`, "aria-hidden": !isMenuOpen && isMobileView, hidden: !isMenuOpen && isMobileView, children: _jsx("ul", { className: styles.list, children: menuLinks.map((item) => (_jsx("li", { children: _jsx(Link, { href: item.href, className: styles.navLink, onClick: handleLinkClick, tabIndex: !isMenuOpen && isMobileView ? -1 : undefined, target: item.target || undefined, rel: item.target === "_blank"
                                         ? "noopener noreferrer"
                                         : undefined, children: item.label }) }, item.id))) }) })] }))] }));
 }

package/dist/components/layout/Header/index.d.ts

@@ -1,15 +1,15 @@
-import type { LogoProps } from "../types";
+import type { LogoProps } from "../types.js";
 export declare const dynamic = "force-static";
 export declare const revalidate = 3600;
 type HeaderProps = {
-    menuId: string;
-    wpApiUrl: string;
-    wpUsername: string;
-    wpAppPassword: string;
+    menuId?: string;
+    wpApiUrl?: string;
+    wpUsername?: string;
+    wpAppPassword?: string;
     siteName: string;
     homeHref?: string;
     locale?: string;
     logo?: LogoProps;
 };
-export default function Header({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, homeHref, locale, logo, }: HeaderProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export default function Header({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, homeHref, locale, logo, }: HeaderProps): Promise<import("react").JSX.Element>;
 export {};

package/dist/components/layout/Header/index.js

@@ -1,47 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createMenuEndpoints, createAuth } from "wpjsapi-lib";
-import { convertWpUrl, getTranslator } from "../../../utils";
-import HeaderClient from "./HeaderClient";
+import { getTranslator } from "../../../utils/index.js";
+import { fetchMenuLinks } from "../../../api/menus.js";
+import HeaderClient from "./HeaderClient.js";
 import styles from "./index.module.css";
 export const dynamic = "force-static";
 export const revalidate = 3600;
 export default async function Header({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, homeHref = "/", locale, logo, }) {
     const t = getTranslator(locale);
-    const auth = createAuth({
-        method: "basic",
-        credentials: {
-            username: wpUsername,
-            password: wpAppPassword,
-        },
-    });
-    const menusApi = createMenuEndpoints({
-        baseUrl: wpApiUrl,
-        auth,
-    });
-    let menuItems = [];
+    let menuLinks = [];
     try {
-        const parsedMenuId = parseInt(menuId);
-        const itemsResponse = await menusApi.items.list({
-            menus: [parsedMenuId],
-            per_page: 100,
-            orderby: "menu_order",
-            order: "asc",
+        menuLinks = await fetchMenuLinks({
+            baseApiUrl: wpApiUrl || "",
+            menuId,
+            username: wpUsername,
+            appPassword: wpAppPassword,
         });
-        menuItems = itemsResponse.items;
     }
     catch (e) {
         console.error("Error obteniendo menú:", e);
     }
-    const menuLinks = menuItems.map((item) => ({
-        id: item.id,
-        href: convertWpUrl(item.url, wpApiUrl),
-        label: item.title.rendered,
-        target: item.target || undefined,
-    }));
     const labels = {
         navAria: t("header.navAria"),
         openMenu: t("header.openMenu"),
         closeMenu: t("header.closeMenu"),
     };
-    return (_jsx("header", { className: styles.header, children: _jsx("div", { className: "container", children: _jsx(HeaderClient, { menuLinks: menuLinks, siteName: siteName, homeHref: homeHref, labels: labels, logo: logo }) }) }));
+    return (_jsx("header", { className: styles.header, children: _jsx("div", { className: styles.container, children: _jsx(HeaderClient, { menuLinks: menuLinks, siteName: siteName, homeHref: homeHref, labels: labels, logo: logo }) }) }));
 }

package/dist/components/layout/Header/index.module.css

@@ -3,18 +3,25 @@
   position: sticky;
   top: 0;
   z-index: 100;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
   backdrop-filter: blur(20px);
-  background: var(--card-bg);
-  box-shadow: 0 1px 3px var(--shadow);
+  background: color-mix(in srgb, var(--card-bg) 92%, transparent);
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--shadow) 45%, transparent);
+}
+
+.container {
+  width: 100%;
+  max-width: var(--container-width);
+  margin: 0 auto;
+  padding-inline: clamp(1rem, 4vw, 2rem);
 }
 
 .inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1.25rem 0;
-  gap: 3rem;
+  padding: 0.75rem 0;
+  gap: clamp(1rem, 4vw, 3rem);
   position: relative;
   min-height: var(--header-height);
 }
@@ -29,10 +36,12 @@
   font-family: var(--font-display);
   letter-spacing: -0.02em;
   text-decoration: none;
+  border-radius: 0.75rem;
+  flex: 0 0 auto;
 }
 
 .logoImage {
-  height: 64px;
+  height: 56px;
   width: auto;
   display: block;
   object-fit: contain;
@@ -42,15 +51,19 @@
   flex: 1;
   display: flex;
   justify-content: flex-end;
+  min-width: 0;
 }
 
 .list {
   display: flex;
-  gap: 2.5rem;
+  gap: 0.1rem;
   list-style: none;
   align-items: center;
   margin: 0;
   padding: 0;
+  max-width: 100%;
+  padding: 0.25rem;
+  box-shadow: none;
 }
 
 .navWrapper {
@@ -59,15 +72,16 @@
   gap: 1.5rem;
   flex: 1;
   justify-content: flex-end;
+  min-width: 0;
 }
 
 .menuButton {
-  display: none;
+  display: none !important;
   align-items: center;
   gap: 0.5rem;
   padding: 0.6rem 0.75rem;
   border-radius: 10px;
-  border: 1px solid var(--border);
+  border: 0;
   background: var(--background);
   color: var(--foreground);
   font-weight: 600;
@@ -77,8 +91,39 @@
   z-index: 120;
 }
 
+.navLink {
+  display: inline-flex;
+  min-height: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 0.4rem 0.62rem;
+  color: var(--foreground);
+  font-size: 0.92rem;
+  font-weight: 650;
+  line-height: 1.12;
+  max-width: 9.75rem;
+  text-align: center;
+  text-decoration: none;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    box-shadow 0.2s ease;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.navLink:hover {
+  color: var(--primary);
+}
+
+.navLink:focus-visible {
+  color: var(--primary);
+  background: color-mix(in srgb, var(--primary) 8%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent);
+}
+
 .menuButton:hover {
-  border-color: var(--primary);
   color: var(--primary);
 }
 
@@ -96,7 +141,9 @@
   height: 2px;
   background: currentColor;
   border-radius: 999px;
-  transition: transform 0.3s ease, opacity 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    opacity 0.3s ease;
 }
 
 .menuIcon span:nth-child(1) {
@@ -148,13 +195,15 @@
     bottom: 0;
     height: calc(100vh - var(--header-height));
     padding: 1.5rem 1.25rem 2.5rem;
-    background: var(--card-bg);
+    background: color-mix(in srgb, var(--card-bg) 97%, transparent);
     display: block;
     overflow: hidden;
     opacity: 0;
     pointer-events: none;
     transform: translateY(-8px);
-    transition: opacity 0.25s ease, transform 0.25s ease;
+    transition:
+      opacity 0.25s ease,
+      transform 0.25s ease;
     z-index: 90;
   }
 
@@ -168,11 +217,23 @@
   .list {
     flex-direction: column;
     align-items: flex-start;
-    gap: 1rem;
-    padding: 1rem 0 1.25rem;
+    gap: 0.15rem;
+    width: min(100%, 440px);
+    border-radius: 1rem;
+    padding: 0.35rem;
+    box-shadow: none;
   }
 
   .menuButton {
-    display: inline-flex;
+    display: inline-flex !important;
+  }
+
+  .navLink {
+    width: 100%;
+    justify-content: flex-start;
+    min-height: 2.45rem;
+    max-width: none;
+    padding: 0.62rem 0.75rem;
+    text-align: left;
   }
 }

package/dist/components/ui/alert.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef } from "react";
+type AlertProps = ComponentPropsWithoutRef<"div"> & {
+    variant?: "default" | "destructive";
+};
+export declare function Alert({ className, variant, ...props }: AlertProps): import("react").JSX.Element;
+export declare function AlertTitle({ className, ...props }: ComponentPropsWithoutRef<"div">): import("react").JSX.Element;
+export declare function AlertDescription({ className, ...props }: ComponentPropsWithoutRef<"div">): import("react").JSX.Element;
+export {};

package/dist/components/ui/alert.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+import styles from "./alert.module.css";
+export function Alert({ className, variant = "default", ...props }) {
+    return (_jsx("div", { "data-slot": "alert", role: "alert", className: cn(styles.alert, variant === "destructive" && styles.destructive, className), ...props }));
+}
+export function AlertTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-title", className: cn(styles.title, className), ...props }));
+}
+export function AlertDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-description", className: cn(styles.description, className), ...props }));
+}

package/dist/components/ui/alert.module.css

@@ -0,0 +1,26 @@
+.alert {
+  position: relative;
+  display: grid;
+  width: 100%;
+  gap: 0.25rem;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  background: var(--card-bg);
+  color: var(--foreground);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.destructive {
+  border-color: color-mix(in srgb, var(--destructive) 40%, var(--border));
+  color: var(--destructive);
+}
+
+.title {
+  font-weight: 600;
+}
+
+.description {
+  color: var(--foreground-light);
+  font-size: 0.875rem;
+}

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithoutRef } from "react";
+export declare function badgeClassName(className?: string): string;
+export declare function Badge({ className, ...props }: ComponentPropsWithoutRef<"span">): import("react").JSX.Element;

package/dist/components/ui/badge.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+import styles from "./badge.module.css";
+export function badgeClassName(className) {
+    return cn(styles.badge, className);
+}
+export function Badge({ className, ...props }) {
+    return _jsx("span", { "data-slot": "badge", className: badgeClassName(className), ...props });
+}

package/dist/components/ui/badge.module.css

@@ -0,0 +1,23 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  background: var(--primary);
+  color: var(--primary-foreground);
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.35;
+  text-decoration: none;
+  box-shadow: 0 1px 2px var(--shadow);
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.badge:hover {
+  background: var(--primary-hover);
+  color: var(--primary-foreground);
+}

package/dist/components/ui/breadcrumb.d.ts

@@ -0,0 +1,8 @@
+import Link from "next/link";
+import type { ComponentPropsWithoutRef } from "react";
+export declare function Breadcrumb({ className, ...props }: ComponentPropsWithoutRef<"nav">): import("react").JSX.Element;
+export declare function BreadcrumbList({ className, ...props }: ComponentPropsWithoutRef<"ol">): import("react").JSX.Element;
+export declare function BreadcrumbItem({ className, ...props }: ComponentPropsWithoutRef<"li">): import("react").JSX.Element;
+export declare function BreadcrumbLink({ className, ...props }: ComponentPropsWithoutRef<typeof Link>): import("react").JSX.Element;
+export declare function BreadcrumbPage({ className, ...props }: ComponentPropsWithoutRef<"span">): import("react").JSX.Element;
+export declare function BreadcrumbSeparator({ className, children, ...props }: ComponentPropsWithoutRef<"span">): import("react").JSX.Element;

package/dist/components/ui/breadcrumb.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Link from "next/link";
+import { cn } from "./cn.js";
+import styles from "./breadcrumb.module.css";
+export function Breadcrumb({ className, ...props }) {
+    return (_jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn(className), ...props }));
+}
+export function BreadcrumbList({ className, ...props }) {
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn(styles.list, className), ...props }));
+}
+export function BreadcrumbItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn(styles.item, className), ...props }));
+}
+export function BreadcrumbLink({ className, ...props }) {
+    return (_jsx(Link, { "data-slot": "breadcrumb-link", className: cn(styles.link, className), ...props }));
+}
+export function BreadcrumbPage({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "breadcrumb-page", "aria-current": "page", className: cn(styles.page, className), ...props }));
+}
+export function BreadcrumbSeparator({ className, children, ...props }) {
+    return (_jsx("span", { "data-slot": "breadcrumb-separator", "aria-hidden": "true", className: cn(styles.separator, className), ...props, children: children ?? "/" }));
+}