@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/components/Header/index.cjs

@@ -0,0 +1,223 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const menu = require("@base-ui/react/menu");
+const react = require("@phosphor-icons/react");
+const Header_module = require("./Header.module.scss.cjs");
+const index = require("../Sidebar/index.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React__namespace.useState(false);
+  React__namespace.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(max-width: 767px)");
+    setIsMobile(mq.matches);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return isMobile;
+}
+function HeaderRoot({
+  children,
+  height = "56px",
+  position = "static",
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const classes = [
+    Header_module.default.header,
+    position === "fixed" && Header_module.default.fixed,
+    position === "sticky" && Header_module.default.sticky,
+    className
+  ].filter(Boolean).join(" ");
+  const style = {
+    "--header-height": height,
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { ...htmlProps, className: classes, style, "data-position": position, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Header_module.default.container, children }) });
+}
+function HeaderBrand({ children, href, className }) {
+  const classes = [Header_module.default.brand, className].filter(Boolean).join(" ");
+  if (href) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: classes, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children });
+}
+function HeaderNav({
+  children,
+  "aria-label": ariaLabel = "Main navigation",
+  className
+}) {
+  const classes = [Header_module.default.nav, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: classes, "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: Header_module.default.navList, children }) });
+}
+function HeaderNavItem({
+  children,
+  active = false,
+  href,
+  asChild = false,
+  onClick,
+  className
+}) {
+  const classes = [
+    Header_module.default.navItem,
+    active && Header_module.default.navItemActive,
+    className
+  ].filter(Boolean).join(" ");
+  const itemProps = {
+    className: classes,
+    onClick,
+    "aria-current": active ? "page" : void 0
+  };
+  if (asChild && React__namespace.isValidElement(children)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { children: React__namespace.cloneElement(children, {
+      ...itemProps,
+      className: [classes, children.props.className].filter(Boolean).join(" ")
+    }) });
+  }
+  if (href) {
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { ...itemProps, href, children }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("button", { ...itemProps, type: "button", children }) });
+}
+function HeaderSearch({
+  children,
+  expandable = false,
+  className
+}) {
+  const classes = [
+    Header_module.default.search,
+    expandable && Header_module.default.searchExpandable,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children });
+}
+function HeaderActions({ children, className }) {
+  const classes = [Header_module.default.actions, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children });
+}
+function HeaderTrigger({
+  children,
+  "aria-label": ariaLabel = "Toggle navigation",
+  className
+}) {
+  const isMobile = useIsMobile();
+  const { open, setOpen } = index.useSidebar();
+  if (!isMobile) {
+    return null;
+  }
+  const classes = [Header_module.default.trigger, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick: () => setOpen(!open),
+      "aria-label": ariaLabel,
+      "aria-expanded": open,
+      children: children || (open ? /* @__PURE__ */ jsxRuntime.jsx(react.X, { size: 24, "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(react.List, { size: 24, "aria-hidden": true }))
+    }
+  );
+}
+function HeaderSpacer({ className }) {
+  const classes = [Header_module.default.spacer, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes });
+}
+function HeaderNavMenu({
+  label,
+  active = false,
+  className,
+  children
+}) {
+  const triggerClasses = [
+    Header_module.default.navItem,
+    Header_module.default.navMenuTrigger,
+    active && Header_module.default.navItemActive,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu.Root, { modal: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu.Trigger, { className: triggerClasses, children: [
+      label,
+      /* @__PURE__ */ jsxRuntime.jsx(react.CaretDown, { size: 12, className: Header_module.default.navMenuChevron, "aria-hidden": true })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Positioner, { side: "bottom", align: "start", sideOffset: 4, className: Header_module.default.navMenuPositioner, children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Popup, { className: Header_module.default.navMenuPopup, children }) }) })
+  ] }) });
+}
+function HeaderNavMenuItem({
+  children,
+  href,
+  active = false,
+  asChild = false,
+  className
+}) {
+  const classes = [
+    Header_module.default.navMenuItem,
+    active && Header_module.default.navMenuItemActive,
+    className
+  ].filter(Boolean).join(" ");
+  if (asChild && React__namespace.isValidElement(children)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      menu.Menu.Item,
+      {
+        className: classes,
+        render: children
+      }
+    );
+  }
+  if (href) {
+    return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Item, { className: classes, render: /* @__PURE__ */ jsxRuntime.jsx("a", { href }), children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Item, { className: classes, children });
+}
+function HeaderSkipLink({
+  children = "Skip to main content",
+  href = "#main-content",
+  className
+}) {
+  const classes = [Header_module.default.skipLink, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: classes, children });
+}
+const Header = Object.assign(HeaderRoot, {
+  Brand: HeaderBrand,
+  Nav: HeaderNav,
+  NavItem: HeaderNavItem,
+  NavMenu: HeaderNavMenu,
+  NavMenuItem: HeaderNavMenuItem,
+  Search: HeaderSearch,
+  Actions: HeaderActions,
+  Trigger: HeaderTrigger,
+  Spacer: HeaderSpacer,
+  SkipLink: HeaderSkipLink
+});
+exports.Header = Header;
+exports.HeaderActions = HeaderActions;
+exports.HeaderBrand = HeaderBrand;
+exports.HeaderNav = HeaderNav;
+exports.HeaderNavItem = HeaderNavItem;
+exports.HeaderNavMenu = HeaderNavMenu;
+exports.HeaderNavMenuItem = HeaderNavMenuItem;
+exports.HeaderRoot = HeaderRoot;
+exports.HeaderSearch = HeaderSearch;
+exports.HeaderSkipLink = HeaderSkipLink;
+exports.HeaderSpacer = HeaderSpacer;
+exports.HeaderTrigger = HeaderTrigger;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Header/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Header/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { CaretDown, List, X } from '@phosphor-icons/react';\nimport styles from './Header.module.scss';\nimport { useSidebar } from '../Sidebar';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Header height (default: '56px') */\n  height?: string;\n  /** Position behavior */\n  position?: 'static' | 'fixed' | 'sticky';\n}\n\nexport interface HeaderBrandProps {\n  children: React.ReactNode;\n  /** Link destination */\n  href?: string;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface HeaderNavProps {\n  children: React.ReactNode;\n  /** Accessible label for navigation */\n  'aria-label'?: string;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface HeaderNavItemProps {\n  children: React.ReactNode;\n  /** Whether this item is active/current */\n  active?: boolean;\n  /** Link destination */\n  href?: string;\n  /** Render as child element (polymorphic) */\n  asChild?: boolean;\n  /** Click handler */\n  onClick?: () => void;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface HeaderSearchProps {\n  children: React.ReactNode;\n  /** Whether search expands on mobile */\n  expandable?: boolean;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface HeaderActionsProps {\n  children: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface HeaderTriggerProps {\n  /** Custom trigger content */\n  children?: React.ReactNode;\n  /** Accessible label */\n  'aria-label'?: string;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface HeaderNavMenuProps {\n  /** Trigger label text */\n  label: string;\n  /** Whether any child in the group is active */\n  active?: boolean;\n  /** Additional class name */\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport interface HeaderNavMenuItemProps {\n  children: React.ReactNode;\n  /** Link destination */\n  href?: string;\n  /** Whether this item is active/current */\n  active?: boolean;\n  /** Render as child element (polymorphic) */\n  asChild?: boolean;\n  /** Additional class name */\n  className?: string;\n}\n\n// ============================================\n// Hooks\n// ============================================\n\nfunction useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState(false);\n\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mq = window.matchMedia('(max-width: 767px)');\n    setIsMobile(mq.matches);\n\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n    mq.addEventListener('change', handler);\n    return () => mq.removeEventListener('change', handler);\n  }, []);\n\n  return isMobile;\n}\n\n// ============================================\n// Components\n// ============================================\n\n/**\n * Header - Root header element\n */\nfunction HeaderRoot({\n  children,\n  height = '56px',\n  position = 'static',\n  className,\n  style: styleProp,\n  ...htmlProps\n}: HeaderProps) {\n  const classes = [\n    styles.header,\n    position === 'fixed' && styles.fixed,\n    position === 'sticky' && styles.sticky,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const style: React.CSSProperties = {\n    '--header-height': height,\n    ...styleProp,\n  } as React.CSSProperties;\n\n  return (\n    <header {...htmlProps} className={classes} style={style} data-position={position}>\n      <div className={styles.container}>\n        {children}\n      </div>\n    </header>\n  );\n}\n\n/**\n * Header.Brand - Logo/brand slot\n */\nfunction HeaderBrand({ children, href, className }: HeaderBrandProps) {\n  const classes = [styles.brand, className].filter(Boolean).join(' ');\n\n  if (href) {\n    return (\n      <a href={href} className={classes}>\n        {children}\n      </a>\n    );\n  }\n\n  return <div className={classes}>{children}</div>;\n}\n\n/**\n * Header.Nav - Navigation container (hidden on mobile)\n */\nfunction HeaderNav({\n  children,\n  'aria-label': ariaLabel = 'Main navigation',\n  className,\n}: HeaderNavProps) {\n  const classes = [styles.nav, className].filter(Boolean).join(' ');\n\n  return (\n    <nav className={classes} aria-label={ariaLabel}>\n      <ul className={styles.navList}>\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\n/**\n * Header.NavItem - Navigation link\n */\nfunction HeaderNavItem({\n  children,\n  active = false,\n  href,\n  asChild = false,\n  onClick,\n  className,\n}: HeaderNavItemProps) {\n  const classes = [\n    styles.navItem,\n    active && styles.navItemActive,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const itemProps = {\n    className: classes,\n    onClick,\n    'aria-current': active ? 'page' as const : undefined,\n  };\n\n  if (asChild && React.isValidElement(children)) {\n    return (\n      <li>\n        {React.cloneElement(children, {\n          ...itemProps,\n          className: [classes, (children.props as { className?: string }).className].filter(Boolean).join(' '),\n        } as React.HTMLAttributes<HTMLElement>)}\n      </li>\n    );\n  }\n\n  if (href) {\n    return (\n      <li>\n        <a {...itemProps} href={href}>\n          {children}\n        </a>\n      </li>\n    );\n  }\n\n  return (\n    <li>\n      <button {...itemProps} type=\"button\">\n        {children}\n      </button>\n    </li>\n  );\n}\n\n/**\n * Header.Search - Search input slot (hidden on mobile unless expandable)\n */\nfunction HeaderSearch({\n  children,\n  expandable = false,\n  className,\n}: HeaderSearchProps) {\n  const classes = [\n    styles.search,\n    expandable && styles.searchExpandable,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return <div className={classes}>{children}</div>;\n}\n\n/**\n * Header.Actions - Right-side actions container\n */\nfunction HeaderActions({ children, className }: HeaderActionsProps) {\n  const classes = [styles.actions, className].filter(Boolean).join(' ');\n  return <div className={classes}>{children}</div>;\n}\n\n/**\n * Header.Trigger - Mobile menu trigger (integrates with SidebarProvider)\n */\nfunction HeaderTrigger({\n  children,\n  'aria-label': ariaLabel = 'Toggle navigation',\n  className,\n}: HeaderTriggerProps) {\n  const isMobile = useIsMobile();\n  const { open, setOpen } = useSidebar();\n\n  // Only render on mobile\n  if (!isMobile) {\n    return null;\n  }\n\n  const classes = [styles.trigger, className].filter(Boolean).join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={classes}\n      onClick={() => setOpen(!open)}\n      aria-label={ariaLabel}\n      aria-expanded={open}\n    >\n      {children || (open ? <X size={24} aria-hidden /> : <List size={24} aria-hidden />)}\n    </button>\n  );\n}\n\n/**\n * Header.Spacer - Flexible spacer to push items apart\n */\nfunction HeaderSpacer({ className }: { className?: string }) {\n  const classes = [styles.spacer, className].filter(Boolean).join(' ');\n  return <div className={classes} />;\n}\n\n/**\n * Header.NavMenu - Dropdown navigation group\n */\nfunction HeaderNavMenu({\n  label,\n  active = false,\n  className,\n  children,\n}: HeaderNavMenuProps) {\n  const triggerClasses = [\n    styles.navItem,\n    styles.navMenuTrigger,\n    active && styles.navItemActive,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <li>\n      <BaseMenu.Root modal={false}>\n        <BaseMenu.Trigger className={triggerClasses}>\n          {label}\n          <CaretDown size={12} className={styles.navMenuChevron} aria-hidden />\n        </BaseMenu.Trigger>\n        <BaseMenu.Portal>\n          <BaseMenu.Positioner side=\"bottom\" align=\"start\" sideOffset={4} className={styles.navMenuPositioner}>\n            <BaseMenu.Popup className={styles.navMenuPopup}>\n              {children}\n            </BaseMenu.Popup>\n          </BaseMenu.Positioner>\n        </BaseMenu.Portal>\n      </BaseMenu.Root>\n    </li>\n  );\n}\n\n/**\n * Header.NavMenuItem - Item inside a NavMenu dropdown\n */\nfunction HeaderNavMenuItem({\n  children,\n  href,\n  active = false,\n  asChild = false,\n  className,\n}: HeaderNavMenuItemProps) {\n  const classes = [\n    styles.navMenuItem,\n    active && styles.navMenuItemActive,\n    className,\n  ].filter(Boolean).join(' ');\n\n  if (asChild && React.isValidElement(children)) {\n    return (\n      <BaseMenu.Item\n        className={classes}\n        render={children as React.ReactElement}\n      />\n    );\n  }\n\n  if (href) {\n    return (\n      <BaseMenu.Item className={classes} render={<a href={href} />}>\n        {children}\n      </BaseMenu.Item>\n    );\n  }\n\n  return (\n    <BaseMenu.Item className={classes}>\n      {children}\n    </BaseMenu.Item>\n  );\n}\n\n/**\n * Header.SkipLink - Skip to main content link (accessibility)\n */\nfunction HeaderSkipLink({\n  children = 'Skip to main content',\n  href = '#main-content',\n  className,\n}: {\n  children?: React.ReactNode;\n  href?: string;\n  className?: string;\n}) {\n  const classes = [styles.skipLink, className].filter(Boolean).join(' ');\n  return (\n    <a href={href} className={classes}>\n      {children}\n    </a>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Header = Object.assign(HeaderRoot, {\n  Brand: HeaderBrand,\n  Nav: HeaderNav,\n  NavItem: HeaderNavItem,\n  NavMenu: HeaderNavMenu,\n  NavMenuItem: HeaderNavMenuItem,\n  Search: HeaderSearch,\n  Actions: HeaderActions,\n  Trigger: HeaderTrigger,\n  Spacer: HeaderSpacer,\n  SkipLink: HeaderSkipLink,\n});\n\nexport {\n  HeaderRoot,\n  HeaderBrand,\n  HeaderNav,\n  HeaderNavItem,\n  HeaderNavMenu,\n  HeaderNavMenuItem,\n  HeaderSearch,\n  HeaderActions,\n  HeaderTrigger,\n  HeaderSpacer,\n  HeaderSkipLink,\n};\n"],"names":["React","styles","jsx","useSidebar","X","List","jsxs","BaseMenu","CaretDown"],"mappings":"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"}

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

@@ -0,0 +1,139 @@
+import * as React from 'react';
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    /** Header height (default: '56px') */
+    height?: string;
+    /** Position behavior */
+    position?: 'static' | 'fixed' | 'sticky';
+}
+export interface HeaderBrandProps {
+    children: React.ReactNode;
+    /** Link destination */
+    href?: string;
+    /** Additional class name */
+    className?: string;
+}
+export interface HeaderNavProps {
+    children: React.ReactNode;
+    /** Accessible label for navigation */
+    'aria-label'?: string;
+    /** Additional class name */
+    className?: string;
+}
+export interface HeaderNavItemProps {
+    children: React.ReactNode;
+    /** Whether this item is active/current */
+    active?: boolean;
+    /** Link destination */
+    href?: string;
+    /** Render as child element (polymorphic) */
+    asChild?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional class name */
+    className?: string;
+}
+export interface HeaderSearchProps {
+    children: React.ReactNode;
+    /** Whether search expands on mobile */
+    expandable?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+export interface HeaderActionsProps {
+    children: React.ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+export interface HeaderTriggerProps {
+    /** Custom trigger content */
+    children?: React.ReactNode;
+    /** Accessible label */
+    'aria-label'?: string;
+    /** Additional class name */
+    className?: string;
+}
+export interface HeaderNavMenuProps {
+    /** Trigger label text */
+    label: string;
+    /** Whether any child in the group is active */
+    active?: boolean;
+    /** Additional class name */
+    className?: string;
+    children: React.ReactNode;
+}
+export interface HeaderNavMenuItemProps {
+    children: React.ReactNode;
+    /** Link destination */
+    href?: string;
+    /** Whether this item is active/current */
+    active?: boolean;
+    /** Render as child element (polymorphic) */
+    asChild?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Header - Root header element
+ */
+declare function HeaderRoot({ children, height, position, className, style: styleProp, ...htmlProps }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header.Brand - Logo/brand slot
+ */
+declare function HeaderBrand({ children, href, className }: HeaderBrandProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header.Nav - Navigation container (hidden on mobile)
+ */
+declare function HeaderNav({ children, 'aria-label': ariaLabel, className, }: HeaderNavProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header.NavItem - Navigation link
+ */
+declare function HeaderNavItem({ children, active, href, asChild, onClick, className, }: HeaderNavItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header.Search - Search input slot (hidden on mobile unless expandable)
+ */
+declare function HeaderSearch({ children, expandable, className, }: HeaderSearchProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header.Actions - Right-side actions container
+ */
+declare function HeaderActions({ children, className }: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header.Trigger - Mobile menu trigger (integrates with SidebarProvider)
+ */
+declare function HeaderTrigger({ children, 'aria-label': ariaLabel, className, }: HeaderTriggerProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Header.Spacer - Flexible spacer to push items apart
+ */
+declare function HeaderSpacer({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header.NavMenu - Dropdown navigation group
+ */
+declare function HeaderNavMenu({ label, active, className, children, }: HeaderNavMenuProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header.NavMenuItem - Item inside a NavMenu dropdown
+ */
+declare function HeaderNavMenuItem({ children, href, active, asChild, className, }: HeaderNavMenuItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header.SkipLink - Skip to main content link (accessibility)
+ */
+declare function HeaderSkipLink({ children, href, className, }: {
+    children?: React.ReactNode;
+    href?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Header: typeof HeaderRoot & {
+    Brand: typeof HeaderBrand;
+    Nav: typeof HeaderNav;
+    NavItem: typeof HeaderNavItem;
+    NavMenu: typeof HeaderNavMenu;
+    NavMenuItem: typeof HeaderNavMenuItem;
+    Search: typeof HeaderSearch;
+    Actions: typeof HeaderActions;
+    Trigger: typeof HeaderTrigger;
+    Spacer: typeof HeaderSpacer;
+    SkipLink: typeof HeaderSkipLink;
+};
+export { HeaderRoot, HeaderBrand, HeaderNav, HeaderNavItem, HeaderNavMenu, HeaderNavMenuItem, HeaderSearch, HeaderActions, HeaderTrigger, HeaderSpacer, HeaderSkipLink, };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Header/index.js

@@ -0,0 +1,206 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Menu } from "@base-ui/react/menu";
+import { X, List, CaretDown } from "@phosphor-icons/react";
+import styles from "./Header.module.scss.js";
+import { useSidebar } from "../Sidebar/index.js";
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(max-width: 767px)");
+    setIsMobile(mq.matches);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return isMobile;
+}
+function HeaderRoot({
+  children,
+  height = "56px",
+  position = "static",
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const classes = [
+    styles.header,
+    position === "fixed" && styles.fixed,
+    position === "sticky" && styles.sticky,
+    className
+  ].filter(Boolean).join(" ");
+  const style = {
+    "--header-height": height,
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsx("header", { ...htmlProps, className: classes, style, "data-position": position, children: /* @__PURE__ */ jsx("div", { className: styles.container, children }) });
+}
+function HeaderBrand({ children, href, className }) {
+  const classes = [styles.brand, className].filter(Boolean).join(" ");
+  if (href) {
+    return /* @__PURE__ */ jsx("a", { href, className: classes, children });
+  }
+  return /* @__PURE__ */ jsx("div", { className: classes, children });
+}
+function HeaderNav({
+  children,
+  "aria-label": ariaLabel = "Main navigation",
+  className
+}) {
+  const classes = [styles.nav, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("nav", { className: classes, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("ul", { className: styles.navList, children }) });
+}
+function HeaderNavItem({
+  children,
+  active = false,
+  href,
+  asChild = false,
+  onClick,
+  className
+}) {
+  const classes = [
+    styles.navItem,
+    active && styles.navItemActive,
+    className
+  ].filter(Boolean).join(" ");
+  const itemProps = {
+    className: classes,
+    onClick,
+    "aria-current": active ? "page" : void 0
+  };
+  if (asChild && React.isValidElement(children)) {
+    return /* @__PURE__ */ jsx("li", { children: React.cloneElement(children, {
+      ...itemProps,
+      className: [classes, children.props.className].filter(Boolean).join(" ")
+    }) });
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { ...itemProps, href, children }) });
+  }
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", { ...itemProps, type: "button", children }) });
+}
+function HeaderSearch({
+  children,
+  expandable = false,
+  className
+}) {
+  const classes = [
+    styles.search,
+    expandable && styles.searchExpandable,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, children });
+}
+function HeaderActions({ children, className }) {
+  const classes = [styles.actions, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, children });
+}
+function HeaderTrigger({
+  children,
+  "aria-label": ariaLabel = "Toggle navigation",
+  className
+}) {
+  const isMobile = useIsMobile();
+  const { open, setOpen } = useSidebar();
+  if (!isMobile) {
+    return null;
+  }
+  const classes = [styles.trigger, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick: () => setOpen(!open),
+      "aria-label": ariaLabel,
+      "aria-expanded": open,
+      children: children || (open ? /* @__PURE__ */ jsx(X, { size: 24, "aria-hidden": true }) : /* @__PURE__ */ jsx(List, { size: 24, "aria-hidden": true }))
+    }
+  );
+}
+function HeaderSpacer({ className }) {
+  const classes = [styles.spacer, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes });
+}
+function HeaderNavMenu({
+  label,
+  active = false,
+  className,
+  children
+}) {
+  const triggerClasses = [
+    styles.navItem,
+    styles.navMenuTrigger,
+    active && styles.navItemActive,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Menu.Root, { modal: false, children: [
+    /* @__PURE__ */ jsxs(Menu.Trigger, { className: triggerClasses, children: [
+      label,
+      /* @__PURE__ */ jsx(CaretDown, { size: 12, className: styles.navMenuChevron, "aria-hidden": true })
+    ] }),
+    /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { side: "bottom", align: "start", sideOffset: 4, className: styles.navMenuPositioner, children: /* @__PURE__ */ jsx(Menu.Popup, { className: styles.navMenuPopup, children }) }) })
+  ] }) });
+}
+function HeaderNavMenuItem({
+  children,
+  href,
+  active = false,
+  asChild = false,
+  className
+}) {
+  const classes = [
+    styles.navMenuItem,
+    active && styles.navMenuItemActive,
+    className
+  ].filter(Boolean).join(" ");
+  if (asChild && React.isValidElement(children)) {
+    return /* @__PURE__ */ jsx(
+      Menu.Item,
+      {
+        className: classes,
+        render: children
+      }
+    );
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx(Menu.Item, { className: classes, render: /* @__PURE__ */ jsx("a", { href }), children });
+  }
+  return /* @__PURE__ */ jsx(Menu.Item, { className: classes, children });
+}
+function HeaderSkipLink({
+  children = "Skip to main content",
+  href = "#main-content",
+  className
+}) {
+  const classes = [styles.skipLink, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("a", { href, className: classes, children });
+}
+const Header = Object.assign(HeaderRoot, {
+  Brand: HeaderBrand,
+  Nav: HeaderNav,
+  NavItem: HeaderNavItem,
+  NavMenu: HeaderNavMenu,
+  NavMenuItem: HeaderNavMenuItem,
+  Search: HeaderSearch,
+  Actions: HeaderActions,
+  Trigger: HeaderTrigger,
+  Spacer: HeaderSpacer,
+  SkipLink: HeaderSkipLink
+});
+export {
+  Header,
+  HeaderActions,
+  HeaderBrand,
+  HeaderNav,
+  HeaderNavItem,
+  HeaderNavMenu,
+  HeaderNavMenuItem,
+  HeaderRoot,
+  HeaderSearch,
+  HeaderSkipLink,
+  HeaderSpacer,
+  HeaderTrigger
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Header/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { CaretDown, List, X } from '@phosphor-icons/react';\nimport styles from './Header.module.scss';\nimport { useSidebar } from '../Sidebar';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Header height (default: '56px') */\n  height?: string;\n  /** Position behavior */\n  position?: 'static' | 'fixed' | 'sticky';\n}\n\nexport interface HeaderBrandProps {\n  children: React.ReactNode;\n  /** Link destination */\n  href?: string;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface HeaderNavProps {\n  children: React.ReactNode;\n  /** Accessible label for navigation */\n  'aria-label'?: string;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface HeaderNavItemProps {\n  children: React.ReactNode;\n  /** Whether this item is active/current */\n  active?: boolean;\n  /** Link destination */\n  href?: string;\n  /** Render as child element (polymorphic) */\n  asChild?: boolean;\n  /** Click handler */\n  onClick?: () => void;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface HeaderSearchProps {\n  children: React.ReactNode;\n  /** Whether search expands on mobile */\n  expandable?: boolean;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface HeaderActionsProps {\n  children: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface HeaderTriggerProps {\n  /** Custom trigger content */\n  children?: React.ReactNode;\n  /** Accessible label */\n  'aria-label'?: string;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface HeaderNavMenuProps {\n  /** Trigger label text */\n  label: string;\n  /** Whether any child in the group is active */\n  active?: boolean;\n  /** Additional class name */\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport interface HeaderNavMenuItemProps {\n  children: React.ReactNode;\n  /** Link destination */\n  href?: string;\n  /** Whether this item is active/current */\n  active?: boolean;\n  /** Render as child element (polymorphic) */\n  asChild?: boolean;\n  /** Additional class name */\n  className?: string;\n}\n\n// ============================================\n// Hooks\n// ============================================\n\nfunction useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState(false);\n\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mq = window.matchMedia('(max-width: 767px)');\n    setIsMobile(mq.matches);\n\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n    mq.addEventListener('change', handler);\n    return () => mq.removeEventListener('change', handler);\n  }, []);\n\n  return isMobile;\n}\n\n// ============================================\n// Components\n// ============================================\n\n/**\n * Header - Root header element\n */\nfunction HeaderRoot({\n  children,\n  height = '56px',\n  position = 'static',\n  className,\n  style: styleProp,\n  ...htmlProps\n}: HeaderProps) {\n  const classes = [\n    styles.header,\n    position === 'fixed' && styles.fixed,\n    position === 'sticky' && styles.sticky,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const style: React.CSSProperties = {\n    '--header-height': height,\n    ...styleProp,\n  } as React.CSSProperties;\n\n  return (\n    <header {...htmlProps} className={classes} style={style} data-position={position}>\n      <div className={styles.container}>\n        {children}\n      </div>\n    </header>\n  );\n}\n\n/**\n * Header.Brand - Logo/brand slot\n */\nfunction HeaderBrand({ children, href, className }: HeaderBrandProps) {\n  const classes = [styles.brand, className].filter(Boolean).join(' ');\n\n  if (href) {\n    return (\n      <a href={href} className={classes}>\n        {children}\n      </a>\n    );\n  }\n\n  return <div className={classes}>{children}</div>;\n}\n\n/**\n * Header.Nav - Navigation container (hidden on mobile)\n */\nfunction HeaderNav({\n  children,\n  'aria-label': ariaLabel = 'Main navigation',\n  className,\n}: HeaderNavProps) {\n  const classes = [styles.nav, className].filter(Boolean).join(' ');\n\n  return (\n    <nav className={classes} aria-label={ariaLabel}>\n      <ul className={styles.navList}>\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\n/**\n * Header.NavItem - Navigation link\n */\nfunction HeaderNavItem({\n  children,\n  active = false,\n  href,\n  asChild = false,\n  onClick,\n  className,\n}: HeaderNavItemProps) {\n  const classes = [\n    styles.navItem,\n    active && styles.navItemActive,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const itemProps = {\n    className: classes,\n    onClick,\n    'aria-current': active ? 'page' as const : undefined,\n  };\n\n  if (asChild && React.isValidElement(children)) {\n    return (\n      <li>\n        {React.cloneElement(children, {\n          ...itemProps,\n          className: [classes, (children.props as { className?: string }).className].filter(Boolean).join(' '),\n        } as React.HTMLAttributes<HTMLElement>)}\n      </li>\n    );\n  }\n\n  if (href) {\n    return (\n      <li>\n        <a {...itemProps} href={href}>\n          {children}\n        </a>\n      </li>\n    );\n  }\n\n  return (\n    <li>\n      <button {...itemProps} type=\"button\">\n        {children}\n      </button>\n    </li>\n  );\n}\n\n/**\n * Header.Search - Search input slot (hidden on mobile unless expandable)\n */\nfunction HeaderSearch({\n  children,\n  expandable = false,\n  className,\n}: HeaderSearchProps) {\n  const classes = [\n    styles.search,\n    expandable && styles.searchExpandable,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return <div className={classes}>{children}</div>;\n}\n\n/**\n * Header.Actions - Right-side actions container\n */\nfunction HeaderActions({ children, className }: HeaderActionsProps) {\n  const classes = [styles.actions, className].filter(Boolean).join(' ');\n  return <div className={classes}>{children}</div>;\n}\n\n/**\n * Header.Trigger - Mobile menu trigger (integrates with SidebarProvider)\n */\nfunction HeaderTrigger({\n  children,\n  'aria-label': ariaLabel = 'Toggle navigation',\n  className,\n}: HeaderTriggerProps) {\n  const isMobile = useIsMobile();\n  const { open, setOpen } = useSidebar();\n\n  // Only render on mobile\n  if (!isMobile) {\n    return null;\n  }\n\n  const classes = [styles.trigger, className].filter(Boolean).join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={classes}\n      onClick={() => setOpen(!open)}\n      aria-label={ariaLabel}\n      aria-expanded={open}\n    >\n      {children || (open ? <X size={24} aria-hidden /> : <List size={24} aria-hidden />)}\n    </button>\n  );\n}\n\n/**\n * Header.Spacer - Flexible spacer to push items apart\n */\nfunction HeaderSpacer({ className }: { className?: string }) {\n  const classes = [styles.spacer, className].filter(Boolean).join(' ');\n  return <div className={classes} />;\n}\n\n/**\n * Header.NavMenu - Dropdown navigation group\n */\nfunction HeaderNavMenu({\n  label,\n  active = false,\n  className,\n  children,\n}: HeaderNavMenuProps) {\n  const triggerClasses = [\n    styles.navItem,\n    styles.navMenuTrigger,\n    active && styles.navItemActive,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <li>\n      <BaseMenu.Root modal={false}>\n        <BaseMenu.Trigger className={triggerClasses}>\n          {label}\n          <CaretDown size={12} className={styles.navMenuChevron} aria-hidden />\n        </BaseMenu.Trigger>\n        <BaseMenu.Portal>\n          <BaseMenu.Positioner side=\"bottom\" align=\"start\" sideOffset={4} className={styles.navMenuPositioner}>\n            <BaseMenu.Popup className={styles.navMenuPopup}>\n              {children}\n            </BaseMenu.Popup>\n          </BaseMenu.Positioner>\n        </BaseMenu.Portal>\n      </BaseMenu.Root>\n    </li>\n  );\n}\n\n/**\n * Header.NavMenuItem - Item inside a NavMenu dropdown\n */\nfunction HeaderNavMenuItem({\n  children,\n  href,\n  active = false,\n  asChild = false,\n  className,\n}: HeaderNavMenuItemProps) {\n  const classes = [\n    styles.navMenuItem,\n    active && styles.navMenuItemActive,\n    className,\n  ].filter(Boolean).join(' ');\n\n  if (asChild && React.isValidElement(children)) {\n    return (\n      <BaseMenu.Item\n        className={classes}\n        render={children as React.ReactElement}\n      />\n    );\n  }\n\n  if (href) {\n    return (\n      <BaseMenu.Item className={classes} render={<a href={href} />}>\n        {children}\n      </BaseMenu.Item>\n    );\n  }\n\n  return (\n    <BaseMenu.Item className={classes}>\n      {children}\n    </BaseMenu.Item>\n  );\n}\n\n/**\n * Header.SkipLink - Skip to main content link (accessibility)\n */\nfunction HeaderSkipLink({\n  children = 'Skip to main content',\n  href = '#main-content',\n  className,\n}: {\n  children?: React.ReactNode;\n  href?: string;\n  className?: string;\n}) {\n  const classes = [styles.skipLink, className].filter(Boolean).join(' ');\n  return (\n    <a href={href} className={classes}>\n      {children}\n    </a>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Header = Object.assign(HeaderRoot, {\n  Brand: HeaderBrand,\n  Nav: HeaderNav,\n  NavItem: HeaderNavItem,\n  NavMenu: HeaderNavMenu,\n  NavMenuItem: HeaderNavMenuItem,\n  Search: HeaderSearch,\n  Actions: HeaderActions,\n  Trigger: HeaderTrigger,\n  Spacer: HeaderSpacer,\n  SkipLink: HeaderSkipLink,\n});\n\nexport {\n  HeaderRoot,\n  HeaderBrand,\n  HeaderNav,\n  HeaderNavItem,\n  HeaderNavMenu,\n  HeaderNavMenuItem,\n  HeaderSearch,\n  HeaderActions,\n  HeaderTrigger,\n  HeaderSpacer,\n  HeaderSkipLink,\n};\n"],"names":["BaseMenu"],"mappings":"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"}