@otl-core/next-navigation 1.1.18 → 1.1.20

package/dist/components/icons/toggle-icon.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { HamburgerIcon } from "./hamburger-icon";
+import { toggleIconMap } from "./toggle-icon-map";
+function ToggleIcon({
+  type,
+  isOpen,
+  className = "",
+  size = 24,
+  animationDuration,
+  animationTiming
+}) {
+  const IconComponent = toggleIconMap.get(type);
+  if (!IconComponent) {
+    return /* @__PURE__ */ jsx(
+      HamburgerIcon,
+      {
+        isOpen,
+        className,
+        size,
+        animationDuration,
+        animationTiming
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      isOpen,
+      className,
+      size,
+      animationDuration,
+      animationTiming
+    }
+  );
+}
+export {
+  ToggleIcon
+};
+//# sourceMappingURL=toggle-icon.js.map

package/dist/components/icons/toggle-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icons/toggle-icon.tsx"],"sourcesContent":["import type { ToggleIconType } from \"@otl-core/cms-types\";\nimport { HamburgerIcon } from \"./hamburger-icon\";\nimport { toggleIconMap } from \"./toggle-icon-map\";\n\ninterface ToggleIconProps {\n  type: ToggleIconType;\n  isOpen: boolean;\n  className?: string;\n  size?: number;\n  animationDuration?: number;\n  animationTiming?: string;\n}\n\nexport function ToggleIcon({\n  type,\n  isOpen,\n  className = \"\",\n  size = 24,\n  animationDuration,\n  animationTiming,\n}: ToggleIconProps) {\n  const IconComponent = toggleIconMap.get(type);\n  if (!IconComponent) {\n    return (\n      <HamburgerIcon\n        isOpen={isOpen}\n        className={className}\n        size={size}\n        animationDuration={animationDuration}\n        animationTiming={animationTiming}\n      />\n    );\n  }\n  return (\n    <IconComponent\n      isOpen={isOpen}\n      className={className}\n      size={size}\n      animationDuration={animationDuration}\n      animationTiming={animationTiming}\n    />\n  );\n}\n"],"mappings":"AAwBM;AAvBN,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAWvB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,gBAAgB,cAAc,IAAI,IAAI;AAC5C,MAAI,CAAC,eAAe;AAClB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/items/animated-toggle-icon.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToggleIconType } from '@otl-core/cms-types';
+
+interface AnimatedToggleIconProps {
+    type: ToggleIconType;
+    isOpen: boolean;
+    className?: string;
+    size?: number;
+    iconId?: string;
+    animationDuration?: number;
+    animationTiming?: string;
+}
+declare function AnimatedToggleIcon({ type, isOpen, className, size, iconId, animationDuration, animationTiming, }: AnimatedToggleIconProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedToggleIcon };

package/dist/components/items/animated-toggle-icon.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ToggleIcon } from "../icons/toggle-icon";
+function AnimatedToggleIcon({
+  type,
+  isOpen,
+  className = "",
+  size = 24,
+  iconId = "default",
+  animationDuration,
+  animationTiming
+}) {
+  const containerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: containerStyle,
+      className: `animated-toggle-icon-${iconId} ${className}`,
+      children: /* @__PURE__ */ jsx(
+        ToggleIcon,
+        {
+          type,
+          isOpen,
+          size,
+          animationDuration,
+          animationTiming
+        }
+      )
+    }
+  );
+}
+export {
+  AnimatedToggleIcon
+};
+//# sourceMappingURL=animated-toggle-icon.js.map

package/dist/components/items/animated-toggle-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/items/animated-toggle-icon.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ToggleIconType } from \"@otl-core/cms-types\";\nimport React from \"react\";\nimport { ToggleIcon } from \"../icons/toggle-icon\";\n\ninterface AnimatedToggleIconProps {\n  type: ToggleIconType;\n  isOpen: boolean;\n  className?: string;\n  size?: number;\n  iconId?: string;\n  animationDuration?: number;\n  animationTiming?: string;\n}\n\nexport function AnimatedToggleIcon({\n  type,\n  isOpen,\n  className = \"\",\n  size = 24,\n  iconId = \"default\",\n  animationDuration,\n  animationTiming,\n}: AnimatedToggleIconProps) {\n  const containerStyle: React.CSSProperties = {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  };\n\n  return (\n    <div\n      style={containerStyle}\n      className={`animated-toggle-icon-${iconId} ${className}`}\n    >\n      <ToggleIcon\n        type={type}\n        isOpen={isOpen}\n        size={size}\n        animationDuration={animationDuration}\n        animationTiming={animationTiming}\n      />\n    </div>\n  );\n}\n"],"mappings":";AAoCM;AAhCN,SAAS,kBAAkB;AAYpB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,iBAAsC;AAAA,IAC1C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAW,wBAAwB,MAAM,IAAI,SAAS;AAAA,MAEtD;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/items/dropdown-content-item.d.ts

@@ -0,0 +1,12 @@
+import { HeaderDropdownContent, HeaderConfig, Site } from '@otl-core/cms-types';
+
+interface DropdownContentItemProps {
+    content: HeaderDropdownContent;
+    resolvedColors: Record<string, string | undefined>;
+    onNavigate?: (contentId: string) => void;
+    navigation: HeaderConfig;
+    site: Site;
+}
+declare const DropdownContentItem: React.FC<DropdownContentItemProps>;
+
+export { DropdownContentItem };

package/dist/components/items/dropdown-content-item.js

@@ -0,0 +1,223 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { resolveColorToCSS } from "@otl-core/style-utils";
+import Link from "next/link";
+import {
+  getLocalizedString,
+  parseMarkdownToHTML
+} from "../../lib/navigation.utils";
+import { Button } from "../ui/button";
+const DropdownContentItem = ({
+  content,
+  resolvedColors,
+  onNavigate,
+  navigation,
+  site
+}) => {
+  if (content.type === "markdown") {
+    const config = content.config;
+    const markdownContent = getLocalizedString(config.content, site);
+    const parsedHTML = parseMarkdownToHTML(markdownContent);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: parsedHTML },
+        style: {
+          color: resolvedColors.text
+        },
+        className: "[&_*]:text-inherit"
+      }
+    );
+  }
+  if (content.type === "image") {
+    const config = content.config;
+    const getBaseValue = (val, fallback) => {
+      if (val === void 0 || val === null) return fallback;
+      if (typeof val === "number") return `${val}px`;
+      if (typeof val === "string") return val;
+      if (typeof val === "object" && "base" in val) return val.base;
+      return fallback;
+    };
+    const width = getBaseValue(config.width, "300px");
+    const height = getBaseValue(config.height, "auto");
+    const objectFit = config.objectFit || "cover";
+    if (!config.src) {
+      return null;
+    }
+    const imgElement = /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: config.src,
+        alt: config.alt || "",
+        style: {
+          display: "block",
+          width,
+          height,
+          objectFit
+        }
+      }
+    );
+    if (config.href) {
+      return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Link, { href: config.href, children: imgElement }) });
+    }
+    return /* @__PURE__ */ jsx("div", { children: imgElement });
+  }
+  if (content.type === "navigation-item") {
+    const config = content.config;
+    const label = getLocalizedString(config.label, site);
+    return /* @__PURE__ */ jsxs(
+      Link,
+      {
+        href: config.href,
+        className: "block px-3 py-2 rounded-md text-sm transition-colors whitespace-nowrap",
+        style: {
+          color: resolvedColors.dropdownMenuLinkColor || resolvedColors.linkColor,
+          backgroundColor: "transparent"
+        },
+        target: config.external ? "_blank" : void 0,
+        rel: config.external ? "noopener noreferrer" : void 0,
+        children: [
+          config.icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: config.icon }),
+          label
+        ]
+      }
+    );
+  }
+  if (content.type === "button") {
+    const config = content.config;
+    const label = getLocalizedString(config.label, site);
+    const variantMap = {
+      primary: "default",
+      secondary: "secondary",
+      outline: "outline",
+      ghost: "ghost"
+    };
+    const sizeMap = {
+      sm: "sm",
+      md: "default",
+      lg: "lg"
+    };
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        asChild: true,
+        variant: config.variant ? variantMap[config.variant] : "default",
+        size: config.size ? sizeMap[config.size] : "default",
+        className: "w-full whitespace-nowrap",
+        style: {
+          fontSize: `var(--btn-font-${config.size || "md"})`
+        },
+        children: /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href: config.href,
+            target: config.external ? "_blank" : void 0,
+            rel: config.external ? "noopener noreferrer" : void 0,
+            children: [
+              config.icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: config.icon }),
+              label
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (content.type === "dropdown") {
+    const label = content.label ? getLocalizedString(content.label, site) : "Submenu";
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: (e) => {
+          e.preventDefault();
+          onNavigate?.(content.id);
+        },
+        type: "button",
+        "data-navigation-internal": "true",
+        className: "block w-full text-left px-3 py-2 rounded-md text-sm transition-colors whitespace-nowrap",
+        style: {
+          color: resolvedColors.dropdownMenuLinkColor || resolvedColors.linkColor,
+          backgroundColor: "transparent"
+        },
+        children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { children: label }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+            }
+          )
+        ] })
+      }
+    );
+  }
+  if (content.type === "section") {
+    const config = content.config;
+    const getLabel = (value) => {
+      if (!value) return "";
+      if (typeof value === "string") return value;
+      return value.en || "";
+    };
+    const title = config.title ? getLabel(config.title) : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-col",
+        style: {
+          gap: config.gap || "0.25rem",
+          justifyContent: config.justify || "flex-start",
+          alignItems: config.align || "flex-start"
+        },
+        children: [
+          title && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "text-sm font-semibold mb-1",
+              style: { color: resolvedColors.text },
+              children: title
+            }
+          ),
+          config.content?.map((item) => /* @__PURE__ */ jsx(
+            DropdownContentItem,
+            {
+              content: item,
+              resolvedColors,
+              onNavigate,
+              navigation,
+              site
+            },
+            item.id
+          ))
+        ]
+      }
+    );
+  }
+  if (content.type === "divider") {
+    const dividerConfig = content.config;
+    const dividerColor = dividerConfig?.color ? resolveColorToCSS(dividerConfig.color) : resolvedColors.border;
+    const thickness = dividerConfig?.thickness || "1px";
+    const margin = dividerConfig?.margin || "0.5rem";
+    const borderStyle = dividerConfig?.style || "solid";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          borderTopWidth: thickness,
+          borderTopStyle: borderStyle,
+          borderTopColor: dividerColor,
+          marginTop: margin,
+          marginBottom: margin
+        }
+      }
+    );
+  }
+  return null;
+};
+export {
+  DropdownContentItem
+};
+//# sourceMappingURL=dropdown-content-item.js.map

package/dist/components/items/dropdown-content-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/items/dropdown-content-item.tsx"],"sourcesContent":["import {\n  Site,\n  HeaderConfig,\n  HeaderDropdownButtonConfig,\n  HeaderDropdownContent,\n  HeaderDropdownDividerConfig,\n  HeaderDropdownImageConfig,\n  HeaderDropdownMarkdownConfig,\n  HeaderDropdownNavigationItemConfig,\n  HeaderDropdownGroupConfig,\n  LocalizedString,\n} from \"@otl-core/cms-types\";\nimport { resolveColorToCSS } from \"@otl-core/style-utils\";\nimport Link from \"next/link\";\nimport {\n  getLocalizedString,\n  parseMarkdownToHTML,\n} from \"../../lib/navigation.utils\";\nimport { Button } from \"../ui/button\";\n\ninterface DropdownContentItemProps {\n  content: HeaderDropdownContent;\n  resolvedColors: Record<string, string | undefined>;\n  onNavigate?: (contentId: string) => void;\n  navigation: HeaderConfig;\n  site: Site;\n}\n\nexport const DropdownContentItem: React.FC<DropdownContentItemProps> = ({\n  content,\n  resolvedColors,\n  onNavigate,\n  navigation,\n  site,\n}) => {\n  if (content.type === \"markdown\") {\n    const config = content.config as HeaderDropdownMarkdownConfig;\n    const markdownContent = getLocalizedString(config.content, site);\n    const parsedHTML = parseMarkdownToHTML(markdownContent);\n\n    return (\n      <div\n        dangerouslySetInnerHTML={{ __html: parsedHTML }}\n        style={{\n          color: resolvedColors.text,\n        }}\n        className=\"[&_*]:text-inherit\"\n      />\n    );\n  }\n\n  // Image content\n  if (content.type === \"image\") {\n    const config = content.config as HeaderDropdownImageConfig;\n\n    const getBaseValue = (\n      val: string | { base: string } | number | undefined,\n      fallback: string,\n    ): string => {\n      if (val === undefined || val === null) return fallback;\n      if (typeof val === \"number\") return `${val}px`;\n      if (typeof val === \"string\") return val;\n      if (typeof val === \"object\" && \"base\" in val) return val.base;\n      return fallback;\n    };\n\n    const width = getBaseValue(config.width, \"300px\");\n    const height = getBaseValue(config.height, \"auto\");\n    const objectFit = config.objectFit || \"cover\";\n\n    if (!config.src) {\n      return null;\n    }\n\n    const imgElement = (\n      <img\n        src={config.src}\n        alt={config.alt || \"\"}\n        style={{\n          display: \"block\",\n          width,\n          height,\n          objectFit,\n        }}\n      />\n    );\n\n    if (config.href) {\n      return (\n        <div>\n          <Link href={config.href}>{imgElement}</Link>\n        </div>\n      );\n    }\n\n    return <div>{imgElement}</div>;\n  }\n\n  // Navigation item (link)\n  if (content.type === \"navigation-item\") {\n    const config = content.config as HeaderDropdownNavigationItemConfig;\n    const label = getLocalizedString(config.label, site);\n\n    return (\n      <Link\n        href={config.href}\n        className=\"block px-3 py-2 rounded-md text-sm transition-colors whitespace-nowrap\"\n        style={{\n          color:\n            resolvedColors.dropdownMenuLinkColor || resolvedColors.linkColor,\n          backgroundColor: \"transparent\",\n        }}\n        target={config.external ? \"_blank\" : undefined}\n        rel={config.external ? \"noopener noreferrer\" : undefined}\n      >\n        {config.icon && <span className=\"mr-2\">{config.icon}</span>}\n        {label}\n      </Link>\n    );\n  }\n\n  // Button\n  if (content.type === \"button\") {\n    const config = content.config as HeaderDropdownButtonConfig;\n    const label = getLocalizedString(config.label, site);\n\n    const variantMap: Record<\n      string,\n      \"default\" | \"secondary\" | \"outline\" | \"ghost\"\n    > = {\n      primary: \"default\",\n      secondary: \"secondary\",\n      outline: \"outline\",\n      ghost: \"ghost\",\n    };\n\n    const sizeMap: Record<string, \"sm\" | \"default\" | \"lg\"> = {\n      sm: \"sm\",\n      md: \"default\",\n      lg: \"lg\",\n    };\n\n    return (\n      <Button\n        asChild\n        variant={config.variant ? variantMap[config.variant] : \"default\"}\n        size={config.size ? sizeMap[config.size] : \"default\"}\n        className=\"w-full whitespace-nowrap\"\n        style={{\n          fontSize: `var(--btn-font-${config.size || \"md\"})`,\n        }}\n      >\n        <Link\n          href={config.href}\n          target={config.external ? \"_blank\" : undefined}\n          rel={config.external ? \"noopener noreferrer\" : undefined}\n        >\n          {config.icon && <span className=\"mr-2\">{config.icon}</span>}\n          {label}\n        </Link>\n      </Button>\n    );\n  }\n\n  // Nested dropdown - switch content\n  if (content.type === \"dropdown\") {\n    const label = content.label\n      ? getLocalizedString(content.label, site)\n      : \"Submenu\";\n\n    return (\n      <button\n        onClick={(e) => {\n          e.preventDefault();\n          onNavigate?.(content.id);\n        }}\n        type=\"button\"\n        data-navigation-internal=\"true\"\n        className=\"block w-full text-left px-3 py-2 rounded-md text-sm transition-colors whitespace-nowrap\"\n        style={{\n          color:\n            resolvedColors.dropdownMenuLinkColor || resolvedColors.linkColor,\n          backgroundColor: \"transparent\",\n        }}\n      >\n        <span className=\"flex items-center justify-between\">\n          <span>{label}</span>\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </span>\n      </button>\n    );\n  }\n\n  // Section with content\n  if (content.type === \"section\") {\n    const config = content.config as HeaderDropdownGroupConfig;\n\n    // Get label as string\n    const getLabel = (value: string | LocalizedString | undefined): string => {\n      if (!value) return \"\";\n      if (typeof value === \"string\") return value;\n      return (value as LocalizedString).en || \"\";\n    };\n\n    const title = config.title ? getLabel(config.title) : undefined;\n\n    return (\n      <div\n        className=\"flex flex-col\"\n        style={{\n          gap: config.gap || \"0.25rem\",\n          justifyContent: config.justify || \"flex-start\",\n          alignItems: config.align || \"flex-start\",\n        }}\n      >\n        {title && (\n          <div\n            className=\"text-sm font-semibold mb-1\"\n            style={{ color: resolvedColors.text }}\n          >\n            {title}\n          </div>\n        )}\n        {config.content?.map((item: HeaderDropdownContent) => (\n          <DropdownContentItem\n            key={item.id}\n            content={item}\n            resolvedColors={resolvedColors}\n            onNavigate={onNavigate}\n            navigation={navigation}\n            site={site}\n          />\n        ))}\n      </div>\n    );\n  }\n\n  // Divider\n  if (content.type === \"divider\") {\n    const dividerConfig = content.config as HeaderDropdownDividerConfig;\n    const dividerColor = dividerConfig?.color\n      ? resolveColorToCSS(dividerConfig.color)\n      : resolvedColors.border;\n    const thickness = dividerConfig?.thickness || \"1px\";\n    const margin = dividerConfig?.margin || \"0.5rem\";\n    const borderStyle = dividerConfig?.style || \"solid\";\n\n    return (\n      <div\n        style={{\n          borderTopWidth: thickness,\n          borderTopStyle: borderStyle,\n          borderTopColor: dividerColor,\n          marginTop: margin,\n          marginBottom: margin,\n        }}\n      />\n    );\n  }\n\n  return null;\n};\n"],"mappings":"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","names":[]}

package/dist/components/items/logo.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HeaderConfig } from '@otl-core/cms-types';
+
+interface LogoProps {
+    navigation: HeaderConfig;
+    siteName: string;
+    logoTextColor?: string;
+}
+declare function Logo({ navigation, siteName, logoTextColor }: LogoProps): react_jsx_runtime.JSX.Element;
+
+export { Logo };

package/dist/components/items/logo.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import Link from "next/link";
+function LogoContent({ navigation, siteName, logoTextColor }) {
+  if (navigation.logo?.url) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: navigation.logo.url,
+        alt: navigation.logo.alt || siteName,
+        width: navigation.logo.width,
+        height: navigation.logo.height,
+        className: "h-auto w-auto",
+        style: {
+          height: navigation.logo.height ? `${navigation.logo.height}px` : "40px"
+        }
+      }
+    );
+  }
+  const text = navigation.logo?.alt || siteName;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "text-xl font-bold",
+      style: logoTextColor ? { color: logoTextColor } : void 0,
+      children: text
+    }
+  );
+}
+function Logo({ navigation, siteName, logoTextColor }) {
+  return /* @__PURE__ */ jsx(Link, { href: "/", className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
+    LogoContent,
+    {
+      navigation,
+      siteName,
+      logoTextColor
+    }
+  ) });
+}
+export {
+  Logo
+};
+//# sourceMappingURL=logo.js.map

package/dist/components/items/logo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/items/logo.tsx"],"sourcesContent":["import { HeaderConfig } from \"@otl-core/cms-types\";\nimport Link from \"next/link\";\n\ninterface LogoProps {\n  navigation: HeaderConfig;\n  siteName: string;\n  logoTextColor?: string;\n}\n\nfunction LogoContent({ navigation, siteName, logoTextColor }: LogoProps) {\n  if (navigation.logo?.url) {\n    return (\n      <img\n        src={navigation.logo.url}\n        alt={navigation.logo.alt || siteName}\n        width={navigation.logo.width}\n        height={navigation.logo.height}\n        className=\"h-auto w-auto\"\n        style={{\n          height: navigation.logo.height\n            ? `${navigation.logo.height}px`\n            : \"40px\",\n        }}\n      />\n    );\n  }\n\n  const text = navigation.logo?.alt || siteName;\n  return (\n    <span\n      className=\"text-xl font-bold\"\n      style={logoTextColor ? { color: logoTextColor } : undefined}\n    >\n      {text}\n    </span>\n  );\n}\n\nexport function Logo({ navigation, siteName, logoTextColor }: LogoProps) {\n  return (\n    <Link href=\"/\" className=\"flex-shrink-0\">\n      <LogoContent\n        navigation={navigation}\n        siteName={siteName}\n        logoTextColor={logoTextColor}\n      />\n    </Link>\n  );\n}\n"],"mappings":"AAYM;AAXN,OAAO,UAAU;AAQjB,SAAS,YAAY,EAAE,YAAY,UAAU,cAAc,GAAc;AACvE,MAAI,WAAW,MAAM,KAAK;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,WAAW,KAAK;AAAA,QACrB,KAAK,WAAW,KAAK,OAAO;AAAA,QAC5B,OAAO,WAAW,KAAK;AAAA,QACvB,QAAQ,WAAW,KAAK;AAAA,QACxB,WAAU;AAAA,QACV,OAAO;AAAA,UACL,QAAQ,WAAW,KAAK,SACpB,GAAG,WAAW,KAAK,MAAM,OACzB;AAAA,QACN;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,QAAM,OAAO,WAAW,MAAM,OAAO;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,gBAAgB,EAAE,OAAO,cAAc,IAAI;AAAA,MAEjD;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,KAAK,EAAE,YAAY,UAAU,cAAc,GAAc;AACvE,SACE,oBAAC,QAAK,MAAK,KAAI,WAAU,iBACvB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/components/mobile/mobile-menu-toggle.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HeaderConfig } from '@otl-core/cms-types';
+
+interface MobileMenuToggleProps {
+    navigation: HeaderConfig;
+    resolvedColors: Record<string, string | undefined>;
+    toggleId: string;
+    mobileMenuId: string;
+}
+declare function MobileMenuToggle({ navigation, resolvedColors, toggleId, mobileMenuId, }: MobileMenuToggleProps): react_jsx_runtime.JSX.Element;
+
+export { MobileMenuToggle };

package/dist/components/mobile/mobile-menu-toggle.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useNavigation } from "../../context/navigation-context";
+import { AnimatedToggleIcon } from "../items/animated-toggle-icon";
+function MobileMenuToggle({
+  navigation,
+  resolvedColors,
+  toggleId,
+  mobileMenuId
+}) {
+  const { activeDropdown, toggleDropdown } = useNavigation();
+  const buttonRef = useRef(null);
+  const isMobileMenuOpen = activeDropdown === mobileMenuId;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: buttonRef,
+      onClick: () => toggleDropdown(mobileMenuId),
+      className: `mobile-menu-toggle-${toggleId} transition-colors group flex items-center justify-center`,
+      style: {
+        backgroundColor: resolvedColors.burgerButtonBackground,
+        color: resolvedColors.burgerIconColor,
+        padding: navigation.style?.burger?.toggleButton?.padding || "0.5rem",
+        borderRadius: navigation.style?.burger?.toggleButton?.borderRadius || "0.375rem",
+        fontSize: 0,
+        lineHeight: 0,
+        font: "0/0 a",
+        // @ts-expect-error - CSS custom properties
+        "--icon-hover": resolvedColors.burgerIconHover
+      },
+      "aria-label": "Toggle navigation menu",
+      "aria-expanded": isMobileMenuOpen,
+      "aria-controls": "mobile-menu-dropdown",
+      children: /* @__PURE__ */ jsx(
+        AnimatedToggleIcon,
+        {
+          type: navigation.style?.burger?.toggleIcon?.type || "hamburger",
+          isOpen: isMobileMenuOpen,
+          size: navigation.style?.burger?.toggleIcon?.size || 24,
+          iconId: toggleId,
+          animationDuration: navigation.style?.burger?.toggleIcon?.animationDuration,
+          animationTiming: navigation.style?.burger?.toggleIcon?.animationTiming,
+          className: "group-hover:text-[var(--icon-hover)]"
+        }
+      )
+    }
+  );
+}
+export {
+  MobileMenuToggle
+};
+//# sourceMappingURL=mobile-menu-toggle.js.map

package/dist/components/mobile/mobile-menu-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/mobile/mobile-menu-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HeaderConfig } from \"@otl-core/cms-types\";\nimport { useRef } from \"react\";\nimport { useNavigation } from \"../../context/navigation-context\";\nimport { AnimatedToggleIcon } from \"../items/animated-toggle-icon\";\n\ninterface MobileMenuToggleProps {\n  navigation: HeaderConfig;\n  resolvedColors: Record<string, string | undefined>;\n  toggleId: string;\n  mobileMenuId: string;\n}\n\nexport function MobileMenuToggle({\n  navigation,\n  resolvedColors,\n  toggleId,\n  mobileMenuId,\n}: MobileMenuToggleProps) {\n  const { activeDropdown, toggleDropdown } = useNavigation();\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const isMobileMenuOpen = activeDropdown === mobileMenuId;\n\n  return (\n    <button\n      ref={buttonRef}\n      onClick={() => toggleDropdown(mobileMenuId)}\n      className={`mobile-menu-toggle-${toggleId} transition-colors group flex items-center justify-center`}\n      style={{\n        backgroundColor: resolvedColors.burgerButtonBackground,\n        color: resolvedColors.burgerIconColor,\n        padding: navigation.style?.burger?.toggleButton?.padding || \"0.5rem\",\n        borderRadius:\n          navigation.style?.burger?.toggleButton?.borderRadius || \"0.375rem\",\n        fontSize: 0,\n        lineHeight: 0,\n        font: \"0/0 a\",\n        // @ts-expect-error - CSS custom properties\n        \"--icon-hover\": resolvedColors.burgerIconHover,\n      }}\n      aria-label=\"Toggle navigation menu\"\n      aria-expanded={isMobileMenuOpen}\n      aria-controls=\"mobile-menu-dropdown\"\n    >\n      <AnimatedToggleIcon\n        type={navigation.style?.burger?.toggleIcon?.type || \"hamburger\"}\n        isOpen={isMobileMenuOpen}\n        size={navigation.style?.burger?.toggleIcon?.size || 24}\n        iconId={toggleId}\n        animationDuration={\n          navigation.style?.burger?.toggleIcon?.animationDuration\n        }\n        animationTiming={navigation.style?.burger?.toggleIcon?.animationTiming}\n        className=\"group-hover:text-[var(--icon-hover)]\"\n      />\n    </button>\n  );\n}\n"],"mappings":";AA6CM;AA1CN,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAS5B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,EAAE,gBAAgB,eAAe,IAAI,cAAc;AACzD,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,mBAAmB,mBAAmB;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,SAAS,MAAM,eAAe,YAAY;AAAA,MAC1C,WAAW,sBAAsB,QAAQ;AAAA,MACzC,OAAO;AAAA,QACL,iBAAiB,eAAe;AAAA,QAChC,OAAO,eAAe;AAAA,QACtB,SAAS,WAAW,OAAO,QAAQ,cAAc,WAAW;AAAA,QAC5D,cACE,WAAW,OAAO,QAAQ,cAAc,gBAAgB;AAAA,QAC1D,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,MAAM;AAAA;AAAA,QAEN,gBAAgB,eAAe;AAAA,MACjC;AAAA,MACA,cAAW;AAAA,MACX,iBAAe;AAAA,MACf,iBAAc;AAAA,MAEd;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,WAAW,OAAO,QAAQ,YAAY,QAAQ;AAAA,UACpD,QAAQ;AAAA,UACR,MAAM,WAAW,OAAO,QAAQ,YAAY,QAAQ;AAAA,UACpD,QAAQ;AAAA,UACR,mBACE,WAAW,OAAO,QAAQ,YAAY;AAAA,UAExC,iBAAiB,WAAW,OAAO,QAAQ,YAAY;AAAA,UACvD,WAAU;AAAA;AAAA,MACZ;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/mobile/navigation-header-wrapper.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+interface NavigationHeaderWrapperProps {
+    children: React__default.ReactNode;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare function NavigationHeaderWrapper({ children, className, style, }: NavigationHeaderWrapperProps): react_jsx_runtime.JSX.Element;
+
+export { NavigationHeaderWrapper };

package/dist/components/mobile/navigation-header-wrapper.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useNavigation } from "../../context/navigation-context";
+function NavigationHeaderWrapper({
+  children,
+  className,
+  style
+}) {
+  const { headerRef } = useNavigation();
+  return /* @__PURE__ */ jsx("header", { ref: headerRef, className, style, children });
+}
+export {
+  NavigationHeaderWrapper
+};
+//# sourceMappingURL=navigation-header-wrapper.js.map

package/dist/components/mobile/navigation-header-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/mobile/navigation-header-wrapper.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { useNavigation } from \"../../context/navigation-context\";\n\ninterface NavigationHeaderWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function NavigationHeaderWrapper({\n  children,\n  className,\n  style,\n}: NavigationHeaderWrapperProps) {\n  const { headerRef } = useNavigation();\n\n  return (\n    <header ref={headerRef} className={className} style={style}>\n      {children}\n    </header>\n  );\n}\n"],"mappings":";AAmBI;AAhBJ,SAAS,qBAAqB;AAQvB,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,EAAE,UAAU,IAAI,cAAc;AAEpC,SACE,oBAAC,YAAO,KAAK,WAAW,WAAsB,OAC3C,UACH;AAEJ;","names":[]}

package/dist/components/navigation/dropdown.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HeaderNavigationItemConfig, HeaderConfig, Site } from '@otl-core/cms-types';
+import React__default from 'react';
+
+interface NavigationDropdownProps {
+    itemId: string;
+    config: HeaderNavigationItemConfig;
+    navigation: HeaderConfig;
+    resolvedColors: Record<string, string | undefined>;
+    styles: React__default.CSSProperties;
+    linkStyle: React__default.CSSProperties;
+    dropdownId: string;
+    site: Site;
+    containerContent?: boolean;
+    isSameLayer?: boolean;
+}
+declare function NavigationDropdown({ itemId, config, navigation, resolvedColors, dropdownId, site, containerContent, isSameLayer, }: NavigationDropdownProps): react_jsx_runtime.JSX.Element | null;
+
+export { NavigationDropdown };