@shipsite.dev/components 0.2.50 → 0.2.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/context/ShipSiteProvider.d.ts +14 -0
  2. package/dist/context/ShipSiteProvider.d.ts.map +1 -1
  3. package/dist/context/ShipSiteProvider.js.map +1 -1
  4. package/dist/context/ThemeProvider.d.ts +2 -1
  5. package/dist/context/ThemeProvider.d.ts.map +1 -1
  6. package/dist/context/ThemeProvider.js +2 -2
  7. package/dist/context/ThemeProvider.js.map +1 -1
  8. package/dist/layout/Header.d.ts.map +1 -1
  9. package/dist/layout/Header.js +23 -3
  10. package/dist/layout/Header.js.map +1 -1
  11. package/dist/ui/navigation-menu.d.ts +15 -0
  12. package/dist/ui/navigation-menu.d.ts.map +1 -0
  13. package/dist/ui/navigation-menu.js +32 -0
  14. package/dist/ui/navigation-menu.js.map +1 -0
  15. package/package.json +2 -1
  16. package/src/context/ShipSiteProvider.tsx +14 -1
  17. package/src/context/ThemeProvider.tsx +10 -3
  18. package/src/layout/Header.tsx +157 -21
  19. package/src/ui/navigation-menu.tsx +168 -0
package/dist/context/ShipSiteProvider.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface ShipSiteContextValue {
7
7
  dark: string;
8
8
  };
9
9
  ogImage?: string;
10
+ darkMode: boolean;
10
11
  colors: {
11
12
  primary: string;
12
13
  accent: string;
@@ -17,6 +18,19 @@ export interface ShipSiteContextValue {
17
18
  items: Array<{
18
19
  label: string;
19
20
  href: string;
21
+ } | {
22
+ label: string;
23
+ children: Array<{
24
+ label: string;
25
+ href: string;
26
+ description?: string;
27
+ }>;
28
+ featured?: {
29
+ title: string;
30
+ description?: string;
31
+ href: string;
32
+ image: string;
33
+ };
20
34
  }>;
21
35
  cta?: {
22
36
  label: string;
package/dist/context/ShipSiteProvider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ShipSiteProvider.d.ts","sourceRoot":"","sources":["../../src/context/ShipSiteProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,UAAU,EAAE;QACV,KAAK,EAAE,KAAK,CAAC;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QAC9C,GAAG,CAAC,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC;KACvC,CAAC;IACF,MAAM,EAAE;QACN,OAAO,CAAC,EAAE,KAAK,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,KAAK,CAAC;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,IAAI,EAAE,MAAM,CAAA;aAAE,CAAC,CAAC;SAC/C,CAAC,CAAC;QACH,MAAM,CAAC,EAAE,KAAK,CAAC;YAAE,QAAQ,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACnD,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;CACvB;AAID,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,oBAAoB,CAAC;CAC7B,2CAIA;AAED,wBAAgB,WAAW,yBAM1B;AAED,wBAAgB,WAAW,2BAE1B;AAED,wBAAgB,cAAc,KAEpB,MAAM,MAAM,KAAG,MAAM,CAW9B;AAED,wBAAgB,iBAAiB,2CAEhC"}
1
+ {"version":3,"file":"ShipSiteProvider.d.ts","sourceRoot":"","sources":["../../src/context/ShipSiteProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,UAAU,EAAE;QACV,KAAK,EAAE,KAAK,CACR;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,GAC/B;YACE,KAAK,EAAE,MAAM,CAAC;YACd,QAAQ,EAAE,KAAK,CAAC;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,IAAI,EAAE,MAAM,CAAC;gBAAC,WAAW,CAAC,EAAE,MAAM,CAAA;aAAE,CAAC,CAAC;YACvE,QAAQ,CAAC,EAAE;gBACT,KAAK,EAAE,MAAM,CAAC;gBACd,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,IAAI,EAAE,MAAM,CAAC;gBACb,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;SACH,CACJ,CAAC;QACF,GAAG,CAAC,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC;KACvC,CAAC;IACF,MAAM,EAAE;QACN,OAAO,CAAC,EAAE,KAAK,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,KAAK,CAAC;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,IAAI,EAAE,MAAM,CAAA;aAAE,CAAC,CAAC;SAC/C,CAAC,CAAC;QACH,MAAM,CAAC,EAAE,KAAK,CAAC;YAAE,QAAQ,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACnD,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;CACvB;AAID,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,oBAAoB,CAAC;CAC7B,2CAIA;AAED,wBAAgB,WAAW,yBAM1B;AAED,wBAAgB,WAAW,2BAE1B;AAED,wBAAgB,cAAc,KAEpB,MAAM,MAAM,KAAG,MAAM,CAW9B;AAED,wBAAgB,iBAAiB,2CAEhC"}
package/dist/context/ShipSiteProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ShipSiteProvider.js","sourceRoot":"","sources":["../../src/context/ShipSiteProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAgCzD,MAAM,eAAe,GAAG,aAAa,CAA8B,IAAI,CAAC,CAAC;AAEzE,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,KAAK,GAIN;IACC,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA4B,CAC9E,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW;IACzB,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC5C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;IACxE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,WAAW;IACzB,OAAO,WAAW,EAAE,CAAC,QAAQ,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAC;IACnC,OAAO,CAAC,IAAY,EAAU,EAAE;QAC9B,IACE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;YACpB,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAC1B,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACzD,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC;IAChC,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,OAAO,WAAW,EAAE,CAAC,gBAAgB,CAAC;AACxC,CAAC"}
1
+ {"version":3,"file":"ShipSiteProvider.js","sourceRoot":"","sources":["../../src/context/ShipSiteProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA6CzD,MAAM,eAAe,GAAG,aAAa,CAA8B,IAAI,CAAC,CAAC;AAEzE,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,KAAK,GAIN;IACC,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA4B,CAC9E,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW;IACzB,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC5C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;IACxE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,WAAW;IACzB,OAAO,WAAW,EAAE,CAAC,QAAQ,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAC;IACnC,OAAO,CAAC,IAAY,EAAU,EAAE;QAC9B,IACE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;YACpB,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAC1B,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACzD,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC;IAChC,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,OAAO,WAAW,EAAE,CAAC,gBAAgB,CAAC;AACxC,CAAC"}
package/dist/context/ThemeProvider.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
- export declare function ThemeProvider({ children }: {
2
+ export declare function ThemeProvider({ children, darkMode, }: {
3
3
  children: React.ReactNode;
4
+ darkMode?: boolean;
4
5
  }): import("react/jsx-runtime").JSX.Element;
5
6
  //# sourceMappingURL=ThemeProvider.d.ts.map
package/dist/context/ThemeProvider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/context/ThemeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAUxE"}
1
+ {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/context/ThemeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAe,GAChB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,2CAWA"}
package/dist/context/ThemeProvider.js CHANGED
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import { ThemeProvider as NextThemeProvider } from 'next-themes';
4
- export function ThemeProvider({ children }) {
5
- return (_jsx(NextThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, children: children }));
4
+ export function ThemeProvider({ children, darkMode = true, }) {
5
+ return (_jsx(NextThemeProvider, { attribute: "class", defaultTheme: darkMode ? 'system' : 'light', enableSystem: darkMode, forcedTheme: darkMode ? undefined : 'light', children: children }));
6
6
  }
7
7
  //# sourceMappingURL=ThemeProvider.js.map
package/dist/context/ThemeProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/context/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAiC;IACvE,OAAO,CACL,KAAC,iBAAiB,IAChB,SAAS,EAAC,OAAO,EACjB,YAAY,EAAC,QAAQ,EACrB,YAAY,kBAEX,QAAQ,GACS,CACrB,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/context/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,GAAG,IAAI,GAIhB;IACC,OAAO,CACL,KAAC,iBAAiB,IAChB,SAAS,EAAC,OAAO,EACjB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC3C,YAAY,EAAE,QAAQ,EACtB,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,YAE1C,QAAQ,GACS,CACrB,CAAC;AACJ,CAAC"}
package/dist/layout/Header.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/layout/Header.tsx"],"names":[],"mappings":"AAiBA,wBAAgB,MAAM,4CAoFrB"}
1
+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/layout/Header.tsx"],"names":[],"mappings":"AAmCA,wBAAgB,MAAM,4CAuKrB"}
package/dist/layout/Header.js CHANGED
@@ -1,16 +1,36 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { Menu } from 'lucide-react';
3
+ import React from 'react';
4
+ import { ChevronDown, Menu } from 'lucide-react';
4
5
  import { useShipSite, useResolveHref } from '../context/ShipSiteProvider';
6
+ import { cn } from '../lib/utils';
5
7
  import { Button } from '../ui/button';
6
8
  import { Navbar, NavbarLeft, NavbarRight } from '../ui/navbar';
9
+ import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, } from '../ui/navigation-menu';
7
10
  import { Sheet, SheetTrigger, SheetContent, SheetTitle, } from '../ui/sheet';
8
11
  import { ThemeToggle } from '../ui/theme-toggle';
9
12
  import { ClientOnly } from '../ui/client-only';
13
+ function isSubmenu(item) {
14
+ return 'children' in item;
15
+ }
10
16
  export function Header() {
11
- const { siteName, logo, navigation, locale, defaultLocale } = useShipSite();
17
+ const { siteName, logo, navigation, locale, defaultLocale, darkMode } = useShipSite();
12
18
  const resolveHref = useResolveHref();
13
19
  const logoSrc = typeof logo === 'string' ? logo : logo?.light;
14
- return (_jsx("header", { className: "sticky top-0 z-50 bg-background/80 backdrop-blur-lg border-b border-border", children: _jsx("div", { className: "container-main", children: _jsxs(Navbar, { children: [_jsx(NavbarLeft, { children: _jsxs("a", { href: locale === defaultLocale ? '/' : `/${locale}`, className: "flex items-center gap-2", children: [logoSrc && (_jsx("img", { src: logoSrc, alt: siteName, className: "h-8 w-auto" })), _jsx("span", { className: "font-semibold text-lg text-foreground", children: siteName })] }) }), _jsxs(NavbarRight, { className: "hidden md:flex", children: [navigation.items.map((item) => (_jsx("a", { href: resolveHref(item.href), className: "text-sm font-medium text-muted-foreground hover:text-foreground transition-colors", children: item.label }, item.href))), _jsx(ThemeToggle, {}), navigation.cta && (_jsx(Button, { asChild: true, size: "sm", children: _jsx("a", { href: navigation.cta.href, children: navigation.cta.label }) }))] }), _jsx("div", { className: "md:hidden", children: _jsx(ClientOnly, { fallback: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Toggle menu", children: _jsx(Menu, { className: "size-5" }) }), children: _jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Toggle menu", children: _jsx(Menu, { className: "size-5" }) }) }), _jsxs(SheetContent, { side: "right", children: [_jsx(SheetTitle, { className: "sr-only", children: "Navigation" }), _jsxs("nav", { className: "flex flex-col gap-4 mt-8", children: [navigation.items.map((item) => (_jsx("a", { href: resolveHref(item.href), className: "text-sm font-medium text-muted-foreground hover:text-foreground transition-colors", children: item.label }, item.href))), navigation.cta && (_jsx(Button, { asChild: true, className: "mt-2", children: _jsx("a", { href: navigation.cta.href, children: navigation.cta.label }) }))] })] })] }) }) })] }) }) }));
20
+ return (_jsx("header", { className: "sticky top-0 z-50 bg-background/80 backdrop-blur-lg border-b border-border", children: _jsx("div", { className: "container-main", children: _jsxs(Navbar, { children: [_jsx(NavbarLeft, { children: _jsxs("a", { href: locale === defaultLocale ? '/' : `/${locale}`, className: "flex items-center gap-2", children: [logoSrc && (_jsx("img", { src: logoSrc, alt: siteName, className: "h-8 w-auto" })), _jsx("span", { className: "font-semibold text-lg text-foreground", children: siteName })] }) }), _jsxs(NavbarRight, { className: "hidden md:flex", children: [_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: navigation.items.map((item, idx) => {
21
+ if (isSubmenu(item)) {
22
+ return (_jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: item.label }), _jsx(NavigationMenuContent, { children: item.featured ? (_jsxs("div", { className: "grid w-[400px] gap-3 md:w-[500px] md:grid-cols-[.75fr_1fr] lg:w-[600px]", children: [_jsx(NavigationMenuLink, { asChild: true, children: _jsxs("a", { href: resolveHref(item.featured.href), className: "flex flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-4 no-underline outline-none select-none focus:shadow-md", children: [_jsx("img", { src: item.featured.image, alt: item.featured.title, className: "mb-2 h-24 w-full rounded object-cover" }), _jsx("div", { className: "mb-1 text-sm font-medium leading-none", children: item.featured.title }), item.featured.description && (_jsx("p", { className: "text-xs leading-snug text-muted-foreground", children: item.featured.description }))] }) }), _jsx("ul", { className: "flex flex-col gap-1 p-1", children: item.children.map((child) => (_jsx("li", { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsxs("a", { href: resolveHref(child.href), className: "block rounded-md p-2 hover:bg-foreground/5", children: [_jsx("div", { className: "text-sm font-medium leading-none", children: child.label }), child.description && (_jsx("p", { className: "mt-1 line-clamp-2 text-xs leading-snug text-muted-foreground", children: child.description }))] }) }) }, child.href))) })] })) : (_jsx("ul", { className: "grid w-[300px] gap-1 p-1 md:w-[400px] md:grid-cols-2", children: item.children.map((child) => (_jsx("li", { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsxs("a", { href: resolveHref(child.href), className: "block rounded-md p-2 hover:bg-foreground/5", children: [_jsx("div", { className: "text-sm font-medium leading-none", children: child.label }), child.description && (_jsx("p", { className: "mt-1 line-clamp-2 text-xs leading-snug text-muted-foreground", children: child.description }))] }) }) }, child.href))) })) })] }, idx));
23
+ }
24
+ return (_jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx("a", { href: resolveHref(item.href), className: "text-sm font-medium text-muted-foreground hover:text-foreground transition-colors inline-flex h-9 items-center px-4 py-2", children: item.label }) }) }, item.href));
25
+ }) }) }), darkMode && _jsx(ThemeToggle, {}), navigation.cta && (_jsx(Button, { asChild: true, size: "sm", children: _jsx("a", { href: navigation.cta.href, children: navigation.cta.label }) }))] }), _jsx("div", { className: "md:hidden", children: _jsx(ClientOnly, { fallback: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Toggle menu", children: _jsx(Menu, { className: "size-5" }) }), children: _jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Toggle menu", children: _jsx(Menu, { className: "size-5" }) }) }), _jsxs(SheetContent, { side: "right", children: [_jsx(SheetTitle, { className: "sr-only", children: "Navigation" }), _jsxs("nav", { className: "flex flex-col gap-4 mt-8", children: [navigation.items.map((item, idx) => {
26
+ if (isSubmenu(item)) {
27
+ return (_jsx(MobileSubmenu, { item: item, resolveHref: resolveHref }, idx));
28
+ }
29
+ return (_jsx("a", { href: resolveHref(item.href), className: "text-sm font-medium text-muted-foreground hover:text-foreground transition-colors", children: item.label }, item.href));
30
+ }), navigation.cta && (_jsx(Button, { asChild: true, className: "mt-2", children: _jsx("a", { href: navigation.cta.href, children: navigation.cta.label }) }))] })] })] }) }) })] }) }) }));
31
+ }
32
+ function MobileSubmenu({ item, resolveHref, }) {
33
+ const [open, setOpen] = React.useState(false);
34
+ return (_jsxs("div", { children: [_jsxs("button", { onClick: () => setOpen(!open), className: "flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors w-full", children: [item.label, _jsx(ChevronDown, { className: cn("size-3.5 transition-transform", open && "rotate-180") })] }), open && (_jsx("div", { className: "mt-2 ml-3 flex flex-col gap-2 border-l border-border pl-3", children: item.children.map((child) => (_jsx("a", { href: resolveHref(child.href), className: "text-sm text-muted-foreground hover:text-foreground transition-colors", children: child.label }, child.href))) }))] }));
15
35
  }
16
36
  //# sourceMappingURL=Header.js.map
package/dist/layout/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/layout/Header.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/layout/Header.tsx"],"names":[],"mappings":"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"}
package/dist/ui/navigation-menu.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
2
+ import * as React from "react";
3
+ declare function NavigationMenu({ className, children, viewport, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
4
+ viewport?: boolean;
5
+ }): import("react/jsx-runtime").JSX.Element;
6
+ declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): import("react/jsx-runtime").JSX.Element;
7
+ declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
8
+ declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
9
+ declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
10
+ declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
11
+ declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): import("react/jsx-runtime").JSX.Element;
12
+ declare function NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
13
+ declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
14
+ export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuViewport, };
15
+ //# sourceMappingURL=navigation-menu.d.ts.map
package/dist/ui/navigation-menu.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../src/ui/navigation-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,uBAAuB,MAAM,iCAAiC,CAAC;AAG3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,QAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,GAAG;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,2CAeA;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,2CAW3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,2CAQ3D;AAED,QAAA,MAAM,0BAA0B,oFAE/B,CAAC;AAEF,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,OAAO,CAAC,2CAc9D;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,OAAO,CAAC,2CAY9D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,2CAW3D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,QAAQ,CAAC,2CAiB/D;AAED,iBAAS,uBAAuB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,SAAS,CAAC,2CAahE;AAED,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,0BAA0B,EAC1B,sBAAsB,GACvB,CAAC"}
package/dist/ui/navigation-menu.js ADDED
@@ -0,0 +1,32 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
3
+ import { cva } from "class-variance-authority";
4
+ import { ChevronDownIcon } from "lucide-react";
5
+ import { cn } from "../lib/utils";
6
+ function NavigationMenu({ className, children, viewport = true, ...props }) {
7
+ return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", "data-viewport": viewport, className: cn("group/navigation-menu relative z-10 flex max-w-max flex-1 items-center justify-center", className), ...props, children: [children, viewport && _jsx(NavigationMenuViewport, {})] }));
8
+ }
9
+ function NavigationMenuList({ className, ...props }) {
10
+ return (_jsx(NavigationMenuPrimitive.List, { "data-slot": "navigation-menu-list", className: cn("group flex flex-1 list-none items-center justify-center gap-1", className), ...props }));
11
+ }
12
+ function NavigationMenuItem({ className, ...props }) {
13
+ return (_jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", className: cn("relative", className), ...props }));
14
+ }
15
+ const navigationMenuTriggerStyle = cva("group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium hover:bg-foreground/5 hover:text-accent-foreground focus:bg-foreground/10 focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-foreground/10 data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-foreground/10 data-[state=open]:bg-foreground/5 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1");
16
+ function NavigationMenuTrigger({ className, children, ...props }) {
17
+ return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), "group", className), ...props, children: [children, " ", _jsx(ChevronDownIcon, { className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180", "aria-hidden": "true" })] }));
18
+ }
19
+ function NavigationMenuContent({ className, ...props }) {
20
+ return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn("data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto", "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none", className), ...props }));
21
+ }
22
+ function NavigationMenuLink({ className, ...props }) {
23
+ return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("data-[active=true]:focus:bg-foreground/10 data-[active=true]:hover:bg-foreground/10 data-[active=true]:bg-foreground/10 data-[active=true]:text-accent-foreground hover:bg-foreground/10 hover:text-accent-foreground focus:bg-foreground/10 focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
24
+ }
25
+ function NavigationMenuViewport({ className, ...props }) {
26
+ return (_jsx("div", { className: cn("absolute top-full left-0 isolate z-50 flex justify-center"), children: _jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: cn("origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 border-border dark:border-border/15 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-sm md:w-[var(--radix-navigation-menu-viewport-width)]", className), ...props }) }));
27
+ }
28
+ function NavigationMenuIndicator({ className, ...props }) {
29
+ return (_jsx(NavigationMenuPrimitive.Indicator, { "data-slot": "navigation-menu-indicator", className: cn("data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden", className), ...props, children: _jsx("div", { className: "bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" }) }));
30
+ }
31
+ export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuViewport, };
32
+ //# sourceMappingURL=navigation-menu.js.map
package/dist/ui/navigation-menu.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"navigation-menu.js","sourceRoot":"","sources":["../../src/ui/navigation-menu.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shipsite.dev/components",
3
- "version": "0.2.50",
3
+ "version": "0.2.55",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/shipsite/shipsite",
@@ -36,6 +36,7 @@
36
36
  "dependencies": {
37
37
  "@radix-ui/react-accordion": "^1.2.3",
38
38
  "@radix-ui/react-dialog": "^1.1.6",
39
+ "@radix-ui/react-navigation-menu": "^1.2.14",
39
40
  "@radix-ui/react-slot": "^1.2.0",
40
41
  "@radix-ui/react-tabs": "^1.1.13",
41
42
  "class-variance-authority": "^0.7.1",
package/src/context/ShipSiteProvider.tsx CHANGED
@@ -7,6 +7,7 @@ export interface ShipSiteContextValue {
7
7
  siteUrl: string;
8
8
  logo?: string | { light: string; dark: string };
9
9
  ogImage?: string;
10
+ darkMode: boolean;
10
11
  colors: {
11
12
  primary: string;
12
13
  accent: string;
@@ -14,7 +15,19 @@ export interface ShipSiteContextValue {
14
15
  text: string;
15
16
  };
16
17
  navigation: {
17
- items: Array<{ label: string; href: string }>;
18
+ items: Array<
19
+ | { label: string; href: string }
20
+ | {
21
+ label: string;
22
+ children: Array<{ label: string; href: string; description?: string }>;
23
+ featured?: {
24
+ title: string;
25
+ description?: string;
26
+ href: string;
27
+ image: string;
28
+ };
29
+ }
30
+ >;
18
31
  cta?: { label: string; href: string };
19
32
  };
20
33
  footer: {
package/src/context/ThemeProvider.tsx CHANGED
@@ -3,12 +3,19 @@
3
3
  import React from 'react';
4
4
  import { ThemeProvider as NextThemeProvider } from 'next-themes';
5
5
 
6
- export function ThemeProvider({ children }: { children: React.ReactNode }) {
6
+ export function ThemeProvider({
7
+ children,
8
+ darkMode = true,
9
+ }: {
10
+ children: React.ReactNode;
11
+ darkMode?: boolean;
12
+ }) {
7
13
  return (
8
14
  <NextThemeProvider
9
15
  attribute="class"
10
- defaultTheme="system"
11
- enableSystem
16
+ defaultTheme={darkMode ? 'system' : 'light'}
17
+ enableSystem={darkMode}
18
+ forcedTheme={darkMode ? undefined : 'light'}
12
19
  >
13
20
  {children}
14
21
  </NextThemeProvider>
package/src/layout/Header.tsx CHANGED
@@ -1,11 +1,19 @@
1
1
  'use client';
2
2
 
3
3
  import React from 'react';
4
- import { Menu } from 'lucide-react';
4
+ import { ChevronDown, Menu } from 'lucide-react';
5
5
  import { useShipSite, useResolveHref } from '../context/ShipSiteProvider';
6
6
  import { cn } from '../lib/utils';
7
7
  import { Button } from '../ui/button';
8
8
  import { Navbar, NavbarLeft, NavbarRight } from '../ui/navbar';
9
+ import {
10
+ NavigationMenu,
11
+ NavigationMenuContent,
12
+ NavigationMenuItem,
13
+ NavigationMenuLink,
14
+ NavigationMenuList,
15
+ NavigationMenuTrigger,
16
+ } from '../ui/navigation-menu';
9
17
  import {
10
18
  Sheet,
11
19
  SheetTrigger,
@@ -15,8 +23,18 @@ import {
15
23
  import { ThemeToggle } from '../ui/theme-toggle';
16
24
  import { ClientOnly } from '../ui/client-only';
17
25
 
26
+ type NavItem = { label: string; href: string } | {
27
+ label: string;
28
+ children: Array<{ label: string; href: string; description?: string }>;
29
+ featured?: { title: string; description?: string; href: string; image: string };
30
+ };
31
+
32
+ function isSubmenu(item: NavItem): item is Extract<NavItem, { children: any }> {
33
+ return 'children' in item;
34
+ }
35
+
18
36
  export function Header() {
19
- const { siteName, logo, navigation, locale, defaultLocale } = useShipSite();
37
+ const { siteName, logo, navigation, locale, defaultLocale, darkMode } = useShipSite();
20
38
  const resolveHref = useResolveHref();
21
39
 
22
40
  const logoSrc = typeof logo === 'string' ? logo : logo?.light;
@@ -40,16 +58,92 @@ export function Header() {
40
58
  </NavbarLeft>
41
59
 
42
60
  <NavbarRight className="hidden md:flex">
43
- {navigation.items.map((item) => (
44
- <a
45
- key={item.href}
46
- href={resolveHref(item.href)}
47
- className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
48
- >
49
- {item.label}
50
- </a>
51
- ))}
52
- <ThemeToggle />
61
+ <NavigationMenu>
62
+ <NavigationMenuList>
63
+ {navigation.items.map((item, idx) => {
64
+ if (isSubmenu(item)) {
65
+ return (
66
+ <NavigationMenuItem key={idx}>
67
+ <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>
68
+ <NavigationMenuContent>
69
+ {item.featured ? (
70
+ <div className="grid w-[400px] gap-3 md:w-[500px] md:grid-cols-[.75fr_1fr] lg:w-[600px]">
71
+ <NavigationMenuLink asChild>
72
+ <a
73
+ href={resolveHref(item.featured.href)}
74
+ className="flex flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-4 no-underline outline-none select-none focus:shadow-md"
75
+ >
76
+ <img
77
+ src={item.featured.image}
78
+ alt={item.featured.title}
79
+ className="mb-2 h-24 w-full rounded object-cover"
80
+ />
81
+ <div className="mb-1 text-sm font-medium leading-none">
82
+ {item.featured.title}
83
+ </div>
84
+ {item.featured.description && (
85
+ <p className="text-xs leading-snug text-muted-foreground">
86
+ {item.featured.description}
87
+ </p>
88
+ )}
89
+ </a>
90
+ </NavigationMenuLink>
91
+ <ul className="flex flex-col gap-1 p-1">
92
+ {item.children.map((child) => (
93
+ <li key={child.href}>
94
+ <NavigationMenuLink asChild>
95
+ <a href={resolveHref(child.href)} className="block rounded-md p-2 hover:bg-foreground/5">
96
+ <div className="text-sm font-medium leading-none">{child.label}</div>
97
+ {child.description && (
98
+ <p className="mt-1 line-clamp-2 text-xs leading-snug text-muted-foreground">
99
+ {child.description}
100
+ </p>
101
+ )}
102
+ </a>
103
+ </NavigationMenuLink>
104
+ </li>
105
+ ))}
106
+ </ul>
107
+ </div>
108
+ ) : (
109
+ <ul className="grid w-[300px] gap-1 p-1 md:w-[400px] md:grid-cols-2">
110
+ {item.children.map((child) => (
111
+ <li key={child.href}>
112
+ <NavigationMenuLink asChild>
113
+ <a href={resolveHref(child.href)} className="block rounded-md p-2 hover:bg-foreground/5">
114
+ <div className="text-sm font-medium leading-none">{child.label}</div>
115
+ {child.description && (
116
+ <p className="mt-1 line-clamp-2 text-xs leading-snug text-muted-foreground">
117
+ {child.description}
118
+ </p>
119
+ )}
120
+ </a>
121
+ </NavigationMenuLink>
122
+ </li>
123
+ ))}
124
+ </ul>
125
+ )}
126
+ </NavigationMenuContent>
127
+ </NavigationMenuItem>
128
+ );
129
+ }
130
+
131
+ return (
132
+ <NavigationMenuItem key={item.href}>
133
+ <NavigationMenuLink asChild>
134
+ <a
135
+ href={resolveHref(item.href)}
136
+ className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors inline-flex h-9 items-center px-4 py-2"
137
+ >
138
+ {item.label}
139
+ </a>
140
+ </NavigationMenuLink>
141
+ </NavigationMenuItem>
142
+ );
143
+ })}
144
+ </NavigationMenuList>
145
+ </NavigationMenu>
146
+ {darkMode && <ThemeToggle />}
53
147
  {navigation.cta && (
54
148
  <Button asChild size="sm">
55
149
  <a href={navigation.cta.href}>
@@ -74,15 +168,22 @@ export function Header() {
74
168
  <SheetContent side="right">
75
169
  <SheetTitle className="sr-only">Navigation</SheetTitle>
76
170
  <nav className="flex flex-col gap-4 mt-8">
77
- {navigation.items.map((item) => (
78
- <a
79
- key={item.href}
80
- href={resolveHref(item.href)}
81
- className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
82
- >
83
- {item.label}
84
- </a>
85
- ))}
171
+ {navigation.items.map((item, idx) => {
172
+ if (isSubmenu(item)) {
173
+ return (
174
+ <MobileSubmenu key={idx} item={item} resolveHref={resolveHref} />
175
+ );
176
+ }
177
+ return (
178
+ <a
179
+ key={item.href}
180
+ href={resolveHref(item.href)}
181
+ className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
182
+ >
183
+ {item.label}
184
+ </a>
185
+ );
186
+ })}
86
187
  {navigation.cta && (
87
188
  <Button asChild className="mt-2">
88
189
  <a href={navigation.cta.href}>
@@ -100,3 +201,38 @@ export function Header() {
100
201
  </header>
101
202
  );
102
203
  }
204
+
205
+ function MobileSubmenu({
206
+ item,
207
+ resolveHref,
208
+ }: {
209
+ item: Extract<NavItem, { children: any }>;
210
+ resolveHref: (href: string) => string;
211
+ }) {
212
+ const [open, setOpen] = React.useState(false);
213
+
214
+ return (
215
+ <div>
216
+ <button
217
+ onClick={() => setOpen(!open)}
218
+ className="flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors w-full"
219
+ >
220
+ {item.label}
221
+ <ChevronDown className={cn("size-3.5 transition-transform", open && "rotate-180")} />
222
+ </button>
223
+ {open && (
224
+ <div className="mt-2 ml-3 flex flex-col gap-2 border-l border-border pl-3">
225
+ {item.children.map((child) => (
226
+ <a
227
+ key={child.href}
228
+ href={resolveHref(child.href)}
229
+ className="text-sm text-muted-foreground hover:text-foreground transition-colors"
230
+ >
231
+ {child.label}
232
+ </a>
233
+ ))}
234
+ </div>
235
+ )}
236
+ </div>
237
+ );
238
+ }
package/src/ui/navigation-menu.tsx ADDED
@@ -0,0 +1,168 @@
1
+ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
2
+ import { cva } from "class-variance-authority";
3
+ import { ChevronDownIcon } from "lucide-react";
4
+ import * as React from "react";
5
+
6
+ import { cn } from "../lib/utils";
7
+
8
+ function NavigationMenu({
9
+ className,
10
+ children,
11
+ viewport = true,
12
+ ...props
13
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
14
+ viewport?: boolean;
15
+ }) {
16
+ return (
17
+ <NavigationMenuPrimitive.Root
18
+ data-slot="navigation-menu"
19
+ data-viewport={viewport}
20
+ className={cn(
21
+ "group/navigation-menu relative z-10 flex max-w-max flex-1 items-center justify-center",
22
+ className,
23
+ )}
24
+ {...props}
25
+ >
26
+ {children}
27
+ {viewport && <NavigationMenuViewport />}
28
+ </NavigationMenuPrimitive.Root>
29
+ );
30
+ }
31
+
32
+ function NavigationMenuList({
33
+ className,
34
+ ...props
35
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
36
+ return (
37
+ <NavigationMenuPrimitive.List
38
+ data-slot="navigation-menu-list"
39
+ className={cn(
40
+ "group flex flex-1 list-none items-center justify-center gap-1",
41
+ className,
42
+ )}
43
+ {...props}
44
+ />
45
+ );
46
+ }
47
+
48
+ function NavigationMenuItem({
49
+ className,
50
+ ...props
51
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
52
+ return (
53
+ <NavigationMenuPrimitive.Item
54
+ data-slot="navigation-menu-item"
55
+ className={cn("relative", className)}
56
+ {...props}
57
+ />
58
+ );
59
+ }
60
+
61
+ const navigationMenuTriggerStyle = cva(
62
+ "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium hover:bg-foreground/5 hover:text-accent-foreground focus:bg-foreground/10 focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-foreground/10 data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-foreground/10 data-[state=open]:bg-foreground/5 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
63
+ );
64
+
65
+ function NavigationMenuTrigger({
66
+ className,
67
+ children,
68
+ ...props
69
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
70
+ return (
71
+ <NavigationMenuPrimitive.Trigger
72
+ data-slot="navigation-menu-trigger"
73
+ className={cn(navigationMenuTriggerStyle(), "group", className)}
74
+ {...props}
75
+ >
76
+ {children}{" "}
77
+ <ChevronDownIcon
78
+ className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
79
+ aria-hidden="true"
80
+ />
81
+ </NavigationMenuPrimitive.Trigger>
82
+ );
83
+ }
84
+
85
+ function NavigationMenuContent({
86
+ className,
87
+ ...props
88
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
89
+ return (
90
+ <NavigationMenuPrimitive.Content
91
+ data-slot="navigation-menu-content"
92
+ className={cn(
93
+ "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
94
+ "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
95
+ className,
96
+ )}
97
+ {...props}
98
+ />
99
+ );
100
+ }
101
+
102
+ function NavigationMenuLink({
103
+ className,
104
+ ...props
105
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
106
+ return (
107
+ <NavigationMenuPrimitive.Link
108
+ data-slot="navigation-menu-link"
109
+ className={cn(
110
+ "data-[active=true]:focus:bg-foreground/10 data-[active=true]:hover:bg-foreground/10 data-[active=true]:bg-foreground/10 data-[active=true]:text-accent-foreground hover:bg-foreground/10 hover:text-accent-foreground focus:bg-foreground/10 focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
111
+ className,
112
+ )}
113
+ {...props}
114
+ />
115
+ );
116
+ }
117
+
118
+ function NavigationMenuViewport({
119
+ className,
120
+ ...props
121
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
122
+ return (
123
+ <div
124
+ className={cn(
125
+ "absolute top-full left-0 isolate z-50 flex justify-center",
126
+ )}
127
+ >
128
+ <NavigationMenuPrimitive.Viewport
129
+ data-slot="navigation-menu-viewport"
130
+ className={cn(
131
+ "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 border-border dark:border-border/15 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-sm md:w-[var(--radix-navigation-menu-viewport-width)]",
132
+ className,
133
+ )}
134
+ {...props}
135
+ />
136
+ </div>
137
+ );
138
+ }
139
+
140
+ function NavigationMenuIndicator({
141
+ className,
142
+ ...props
143
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
144
+ return (
145
+ <NavigationMenuPrimitive.Indicator
146
+ data-slot="navigation-menu-indicator"
147
+ className={cn(
148
+ "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
149
+ className,
150
+ )}
151
+ {...props}
152
+ >
153
+ <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
154
+ </NavigationMenuPrimitive.Indicator>
155
+ );
156
+ }
157
+
158
+ export {
159
+ NavigationMenu,
160
+ NavigationMenuContent,
161
+ NavigationMenuIndicator,
162
+ NavigationMenuItem,
163
+ NavigationMenuLink,
164
+ NavigationMenuList,
165
+ NavigationMenuTrigger,
166
+ navigationMenuTriggerStyle,
167
+ NavigationMenuViewport,
168
+ };