@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/navigation/dropdown/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sources":["../../../../src/components/navigation/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useLayoutEffect, useCallback, createContext, useContext } from 'react';\nimport { createPortal } from 'react-dom';\nimport Button, { type ButtonProps } from '../../forms/button/button';\nimport { Icon } from '@/components/system/icon';\nimport { gapSizes, Size } from '@/theme/size-tokens';\n\nexport type DropdownTriggerProps = {\n  /** Main label text */\n  title: string;\n  /** Optional secondary text shown below the title */\n  subtitle?: string;\n  /** Optional leading icon */\n  icon?: string;\n  /** Size of the leading icon */\n  iconSize?: Size;\n  /** Size variant for the trigger button */\n  triggerSize?: ButtonProps['size'];\n  /** Optional trailing icon */\n  endIcon?: string;\n};\n\nexport type DropdownProps = {\n  /** Trigger configuration - rendered as an accessible Button */\n  trigger: DropdownTriggerProps;\n  children: React.ReactNode;\n  className?: string;\n  align?: 'start' | 'center' | 'end';\n  autoClose?: boolean; // close on item select\n  /** Size of the dropdown panel and items */\n  size?: ButtonProps['size'];\n  /** Button variant for the trigger */\n  variant?: ButtonProps['variant'];\n  /** Button style for the trigger */\n  buttonStyle?: ButtonProps['style'];\n  /** Minimum width for the dropdown menu and all items (e.g., '200px', '16rem') */\n  minWidth?: string;\n  /** Maximum width for the dropdown menu (e.g., '400px', '24rem') */\n  maxWidth?: string;\n  /** Additional styles for the dropdown menu */\n  menuClassName?: string;\n};\n\ntype DropdownContextValue = {\n  requestClose: () => void;\n  autoClose: boolean;\n  registerItem?: (el: HTMLButtonElement | null, index?: number) => void;\n  minWidth?: string;\n  size?: ButtonProps['size'];\n};\n\nconst DropdownContext = createContext<DropdownContextValue | null>(null);\n\nexport function useDropdown() {\n  const ctx = useContext(DropdownContext);\n  if (!ctx) throw new Error('useDropdown must be used within <Dropdown>');\n  return ctx;\n}\n\n/**\n * Dropdown component with click-outside handling\n */\nfunction Dropdown({\n  trigger,\n  children,\n  className = '',\n  align = 'start',\n  autoClose = true,\n  size = 'md',\n  variant = 'neutral',\n  buttonStyle = 'solid',\n  minWidth,\n  maxWidth,\n  menuClassName = ''\n}: Readonly<DropdownProps>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const itemsRef = useRef<Array<HTMLButtonElement | null>>([]);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const [menuPosition, setMenuPosition] = useState<{ top: number; left: number; width: number } | null>(null);\n\n  const close = useCallback(() => setIsOpen(false), []);\n  const open = useCallback(() => setIsOpen(true), []);\n\n  // Handle keyboard navigation\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleKey = (e: KeyboardEvent) => {\n      if (!menuRef.current) return;\n      const itemEls = itemsRef.current.filter(Boolean);\n      if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {\n        e.preventDefault();\n        if (itemEls.length === 0) return;\n        let nextIndex = activeIndex;\n        if (e.key === 'ArrowDown') nextIndex = (activeIndex + 1) % itemEls.length;\n        if (e.key === 'ArrowUp') nextIndex = (activeIndex - 1 + itemEls.length) % itemEls.length;\n        if (e.key === 'Home') nextIndex = 0;\n        if (e.key === 'End') nextIndex = itemEls.length - 1;\n        setActiveIndex(nextIndex);\n        itemEls[nextIndex]?.focus();\n        return;\n      }\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        close();\n        triggerRef.current?.focus();\n      }\n      if (e.key === 'Tab') {\n        // trap focus\n        e.preventDefault();\n        const itemEls = itemsRef.current.filter(Boolean);\n        if (itemEls.length === 0) return;\n        const dir = e.shiftKey ? -1 : 1;\n        const nextIndex = (activeIndex + dir + itemEls.length) % itemEls.length;\n        setActiveIndex(nextIndex);\n        itemEls[nextIndex]?.focus();\n      }\n    };\n    document.addEventListener('keydown', handleKey);\n    return () => document.removeEventListener('keydown', handleKey);\n  }, [isOpen, activeIndex, close]);\n\n  // Outside click close\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleClickOutside = (event: MouseEvent) => {\n      const isClickInTrigger = dropdownRef.current && dropdownRef.current.contains(event.target as Node);\n      const isClickInMenu = menuRef.current && menuRef.current.contains(event.target as Node);\n\n      if (!isClickInTrigger && !isClickInMenu) {\n        close();\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close]);\n\n  useLayoutEffect(() => {\n    if (isOpen && triggerRef.current) {\n      const rect = triggerRef.current.getBoundingClientRect();\n      setMenuPosition({\n        top: rect.bottom,\n        left: rect.left,\n        width: rect.width\n      });\n    } else {\n      setMenuPosition(null);\n    }\n  }, [isOpen]);\n\n  // Close on scroll or resize (simpler than tracking position)\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleScrollOrResize = (event?: Event) => {\n      // Allow scrolling inside the menu itself\n      if (event && event.target && menuRef.current?.contains(event.target as Node)) {\n        return;\n      }\n      close();\n    };\n\n    window.addEventListener('scroll', handleScrollOrResize, true);\n    window.addEventListener('resize', handleScrollOrResize);\n\n    return () => {\n      window.removeEventListener('scroll', handleScrollOrResize, true);\n      window.removeEventListener('resize', handleScrollOrResize);\n    };\n  }, [isOpen, close]);\n\n  // Auto-focus first item on open (useLayoutEffect to avoid cascading re-renders)\n  useLayoutEffect(() => {\n    let raf: number | undefined;\n    if (isOpen) {\n      const itemEls = itemsRef.current.filter(Boolean);\n      if (itemEls.length) {\n        // schedule the focus and state update to avoid cascading synchronous renders\n        raf = requestAnimationFrame(() => {\n          setActiveIndex(0);\n          itemEls[0]?.focus();\n        });\n      }\n    } else {\n      raf = requestAnimationFrame(() => setActiveIndex(-1));\n    }\n    return () => {\n      if (raf) cancelAnimationFrame(raf);\n    };\n  }, [isOpen]);\n\n  const registerItem = useCallback((el: HTMLButtonElement | null, index?: number) => {\n    // If index provided, set at index; otherwise push/remove based on presence\n    if (typeof index === 'number' && index >= 0) {\n      itemsRef.current[index] = el;\n      return;\n    }\n    if (el === null) {\n      // remove element references\n      itemsRef.current = itemsRef.current.filter((x) => x !== el && x != null);\n      return;\n    }\n    // Push new element at the end if not already present\n    if (!itemsRef.current.includes(el)) itemsRef.current.push(el);\n  }, []);\n\n  const { title, subtitle, icon, iconSize = 'md', triggerSize = size, endIcon } = trigger;\n\n  const iconNode = icon ? <Icon name={icon} size={iconSize} color=\"currentColor\" /> : null;\n  const endIconNode = endIcon ? <Icon name={endIcon} size={iconSize} color=\"currentColor\" /> : null;\n\n  const getAlignmentStyle = (): React.CSSProperties => {\n    if (!menuPosition) return {};\n    const baseStyle: React.CSSProperties = {\n      top: menuPosition.top + 4, // slightly lower than trigger\n      minWidth: minWidth || undefined,\n      maxWidth: maxWidth || undefined\n    };\n\n    if (align === 'start') {\n      baseStyle.left = menuPosition.left;\n    } else if (align === 'end') {\n      baseStyle.right = window.innerWidth - (menuPosition.left + menuPosition.width);\n    } else {\n      baseStyle.left = menuPosition.left + menuPosition.width / 2;\n      baseStyle.transform = 'translateX(-50%)';\n    }\n\n    return baseStyle;\n  };\n\n  return (\n    <>\n      <div ref={dropdownRef} className={`inline-block ${className}`}>\n        <Button\n          ref={triggerRef}\n          variant={variant}\n          style={buttonStyle}\n          onClick={() => (isOpen ? close() : open())}\n          aria-expanded={isOpen}\n          aria-haspopup=\"true\"\n          aria-controls={isOpen ? 'dropdown-menu' : undefined}\n          size={triggerSize}\n        >\n          <span className={`flex items-center ${gapSizes[iconSize]}`}>\n            {iconNode && <span className=\"shrink-0\">{iconNode}</span>}\n            {(title || subtitle) && (\n              <span className={subtitle ? 'text-left' : ''}>\n                <span className={subtitle ? 'block font-semibold' : ''}>{title}</span>\n                {subtitle && <span className=\"block text-xs text-muted-foreground font-normal\">{subtitle}</span>}\n              </span>\n            )}\n            {endIconNode && <span className=\"shrink-0\">{endIconNode}</span>}\n          </span>\n        </Button>\n      </div>\n      {isOpen &&\n        menuPosition &&\n        createPortal(\n          <DropdownContext.Provider value={{ requestClose: close, autoClose, registerItem, minWidth, size }}>\n            <div\n              id=\"dropdown-menu\"\n              ref={menuRef}\n              className={`fixed bg-popover text-popover-foreground border border-border rounded-md shadow-lg z-50 ${size === 'sm' ? 'min-w-36 text-xs py-1' : 'min-w-44'} max-h-80 overflow-y-auto origin-top animate-scaleIn focus:outline-none ${menuClassName}`}\n              style={getAlignmentStyle()}\n              role=\"menu\"\n              aria-orientation=\"vertical\"\n              tabIndex={-1}\n            >\n              {children}\n            </div>\n          </DropdownContext.Provider>,\n          document.body\n        )}\n    </>\n  );\n}\n\nDropdown.displayName = 'Dropdown';\n\nexport default Dropdown;\n\n// DropdownItem size mapping constants\n// Map size to text classes for main content\nconst sizeTextMap: Record<string, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n  xl: 'text-xl'\n} as const;\n\n// Map size to description text classes (one step smaller)\nconst descriptionTextMap: Record<string, string> = {\n  xs: 'text-[10px]', // smaller than xs\n  sm: 'text-xs',\n  md: 'text-sm',\n  lg: 'text-base',\n  xl: 'text-lg'\n} as const;\n\n// Map size to padding\nconst sizePaddingMap: Record<string, string> = {\n  xs: 'px-2 py-1',\n  sm: 'px-2.5 py-1.5',\n  md: 'px-3.5 py-2',\n  lg: 'px-4 py-2.5',\n  xl: 'px-5 py-3'\n} as const;\n\n// DropdownItem component (simple abstraction)\nexport type DropdownItemProps = {\n  children: React.ReactNode;\n  onSelect?: () => void;\n  /** Semantic color variant */\n  variant?: 'neutral' | 'primary' | 'accent' | 'info' | 'success' | 'warning' | 'error';\n  disabled?: boolean;\n  className?: string;\n  /** Optional muted description below main label */\n  description?: string;\n  /** Leading icon */\n  icon?: string;\n  iconSize?: Size;\n  /** Trailing icon (e.g., checkmark for selected items) */\n  endIcon?: string;\n  /** Inherit size from dropdown or override */\n  size?: 'sm' | 'md';\n  /** Marks item as selected with enhanced background and optional checkmark */\n  selected?: boolean;\n  __dropdownIndex?: number; // injected\n  __registerItem?: (el: HTMLButtonElement | null, index: number) => void; // injected (deprecated)\n};\n\nexport function DropdownItem({\n  children,\n  onSelect,\n  variant = 'neutral',\n  disabled = false,\n  className = '',\n  description,\n  icon,\n  iconSize,\n  endIcon,\n  size,\n  selected = false\n}: Readonly<DropdownItemProps>) {\n  const ctx = useContext(DropdownContext);\n  const effectiveSize = size ?? ctx?.size ?? 'md';\n  const effectiveIconSize = iconSize ?? effectiveSize;\n\n  const base = `${sizeTextMap[effectiveSize] || sizeTextMap.md} ${sizePaddingMap[effectiveSize] || sizePaddingMap.md} w-full text-left select-none transition-colors outline-none disabled:opacity-40 disabled:pointer-events-none`;\n  const focus =\n    'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-popover';\n\n  // Base palette for non-selected state\n  const palette: Record<string, string> = {\n    default: 'text-foreground/90 hover:bg-muted active:bg-muted/80',\n    primary: 'text-primary hover:bg-primary/15 active:bg-primary/25 focus-visible:ring-primary',\n    accent: 'text-accent hover:bg-accent/15 active:bg-accent/25 focus-visible:ring-accent',\n    info: 'text-info hover:bg-info/15 active:bg-info/25 focus-visible:ring-info',\n    success: 'text-success hover:bg-success/15 active:bg-success/25 focus-visible:ring-success',\n    warning: 'text-warning hover:bg-warning/18 active:bg-warning/28 focus-visible:ring-warning',\n    error: 'text-error hover:bg-error/15 active:bg-error/25 focus-visible:ring-error'\n  };\n\n  // Selected state palette - solid button style with foreground text\n  const selectedPalette: Record<string, string> = {\n    default: 'bg-muted text-foreground hover:bg-muted-hover hover:text-foreground',\n    primary: 'bg-primary text-primary-foreground hover:bg-primary-hover hover:text-primary-foreground',\n    accent: 'bg-accent text-accent-foreground hover:bg-accent-hover hover:text-accent-foreground',\n    info: 'bg-info text-info-foreground hover:bg-info-hover hover:text-info-foreground',\n    success: 'bg-success text-success-foreground hover:bg-success-hover hover:text-success-foreground',\n    warning: 'bg-warning text-warning-foreground hover:bg-warning-hover hover:text-warning-foreground',\n    error: 'bg-error text-error-foreground hover:bg-error-hover hover:text-error-foreground'\n  };\n\n  const variantClasses = selected\n    ? selectedPalette[variant] || selectedPalette.default\n    : palette[variant] || palette.default;\n\n  // Determine layout: if we have icons, use horizontal layout, otherwise vertical\n  const hasIcons = icon || endIcon;\n  const iconNode = icon ? <Icon name={icon} size={effectiveIconSize} color=\"currentColor\" /> : null;\n  const endIconNode = endIcon ? <Icon name={endIcon} size={effectiveIconSize} color=\"currentColor\" /> : null;\n\n  return (\n    <button\n      ref={(el) => ctx?.registerItem?.(el)}\n      role=\"menuitem\"\n      type=\"button\"\n      disabled={disabled}\n      aria-current={selected ? 'true' : undefined}\n      onClick={() => {\n        if (disabled) return;\n        onSelect?.();\n        if (ctx?.autoClose) ctx.requestClose();\n      }}\n      className={`${base} ${focus} ${variantClasses} ${hasIcons ? 'flex flex-row items-center gap-2.5' : 'flex flex-col'} ${className} cursor-pointer`}\n    >\n      {iconNode && <span className=\"shrink-0\">{iconNode}</span>}\n      <span className=\"flex-1 min-w-0\">\n        <span className={`block font-medium leading-snug`}>{children}</span>\n        {description && (\n          <span\n            className={`block ${descriptionTextMap[effectiveSize] || descriptionTextMap.md} text-foreground/60 mt-0.5 line-clamp-2`}\n          >\n            {description}\n          </span>\n        )}\n      </span>\n      {endIconNode && <span className=\"shrink-0\">{endIconNode}</span>}\n    </button>\n  );\n}\n\n/**\n * DropdownSeparator - Visual divider for grouping dropdown items\n * Use between items to create visual separation (e.g., separating error actions)\n */\nexport function DropdownSeparator({ className = '' }: Readonly<{ className?: string }>) {\n  return <div role=\"separator\" className={`h-px bg-border ${className}`} />;\n}\n"],"names":["itemEls"],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+export { default } from './dropdown';
+export type { DropdownProps, DropdownTriggerProps } from './dropdown';
+export { DropdownItem, DropdownSeparator } from './dropdown';
+export type { DropdownItemProps } from './dropdown';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/navigation/nav/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './nav';
+export type { NavProps } from './nav';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/nav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/nav/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC"}

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

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export type NavProps = {
+    /** Navigation items to render (typically NavbarLink or other nav elements) */
+    children: React.ReactNode;
+    /** Additional CSS classes (kept for backward compatibility) */
+    className?: string;
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Layout direction for the nav - horizontal (default) or vertical */
+    direction?: 'horizontal' | 'vertical';
+    /** Spacing variant between children */
+    spacing?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Alignment of items along cross axis */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+};
+/**
+ * Accessible navigation component
+ */
+declare function Nav({ children, className, ariaLabel, direction, spacing, align }: Readonly<NavProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Nav {
+    var displayName: string;
+}
+export default Nav;
+//# sourceMappingURL=nav.d.ts.map

package/dist/components/navigation/nav/nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/nav/nav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,QAAQ,GAAG;IACrB,8EAA8E;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7C,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;CAChD,CAAC;AAEF;;GAEG;AACH,iBAAS,GAAG,CAAC,EACX,QAAQ,EACR,SAAc,EACd,SAA6B,EAC7B,SAAwB,EACxB,OAAc,EACd,KAAgB,EACjB,EAAE,QAAQ,CAAC,QAAQ,CAAC,2CAyBpB;kBAhCQ,GAAG;;;AAoCZ,eAAe,GAAG,CAAC"}

package/dist/components/navigation/nav/nav.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+function Nav({
+  children,
+  className = "",
+  ariaLabel = "Main navigation",
+  direction = "horizontal",
+  spacing = "md",
+  align = "center"
+}) {
+  const spacingClasses = {
+    none: "gap-0",
+    sm: "gap-3 sm:gap-2",
+    md: "gap-5 sm:gap-4",
+    lg: "gap-7 sm:gap-6",
+    xl: "gap-10 sm:gap-8"
+  };
+  const alignClasses = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch"
+  };
+  const directionClass = direction === "horizontal" ? "flex-row" : "flex-col";
+  const spacingClass = spacingClasses[spacing];
+  const alignClass = alignClasses[align];
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: `flex ${directionClass} ${spacingClass} ${alignClass} ${className}`, children });
+}
+Nav.displayName = "Nav";
+export {
+  Nav as default
+};
+//# sourceMappingURL=nav.js.map

package/dist/components/navigation/nav/nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav.js","sources":["../../../../src/components/navigation/nav/nav.tsx"],"sourcesContent":["import React from 'react';\n\nexport type NavProps = {\n  /** Navigation items to render (typically NavbarLink or other nav elements) */\n  children: React.ReactNode;\n  /** Additional CSS classes (kept for backward compatibility) */\n  className?: string;\n  /** Accessibility label */\n  ariaLabel?: string;\n  /** Layout direction for the nav - horizontal (default) or vertical */\n  direction?: 'horizontal' | 'vertical';\n  /** Spacing variant between children */\n  spacing?: 'none' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Alignment of items along cross axis */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n};\n\n/**\n * Accessible navigation component\n */\nfunction Nav({\n  children,\n  className = '',\n  ariaLabel = 'Main navigation',\n  direction = 'horizontal',\n  spacing = 'md',\n  align = 'center'\n}: Readonly<NavProps>) {\n  const spacingClasses: Record<NonNullable<NavProps['spacing']>, string> = {\n    none: 'gap-0',\n    sm: 'gap-3 sm:gap-2',\n    md: 'gap-5 sm:gap-4',\n    lg: 'gap-7 sm:gap-6',\n    xl: 'gap-10 sm:gap-8'\n  };\n\n  const alignClasses: Record<NonNullable<NavProps['align']>, string> = {\n    start: 'items-start',\n    center: 'items-center',\n    end: 'items-end',\n    stretch: 'items-stretch'\n  };\n\n  const directionClass = direction === 'horizontal' ? 'flex-row' : 'flex-col';\n  const spacingClass = spacingClasses[spacing];\n  const alignClass = alignClasses[align as NonNullable<NavProps['align']>];\n\n  return (\n    <nav aria-label={ariaLabel} className={`flex ${directionClass} ${spacingClass} ${alignClass} ${className}`}>\n      {children}\n    </nav>\n  );\n}\n\nNav.displayName = 'Nav';\n\nexport default Nav;\n"],"names":[],"mappings":";AAoBA,SAAS,IAAI;AAAA,EACX;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,QAAQ;AACV,GAAuB;AACrB,QAAM,iBAAmE;AAAA,IACvE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAGN,QAAM,eAA+D;AAAA,IACnE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAGX,QAAM,iBAAiB,cAAc,eAAe,aAAa;AACjE,QAAM,eAAe,eAAe,OAAO;AAC3C,QAAM,aAAa,aAAa,KAAuC;AAEvE,SACE,oBAAC,OAAA,EAAI,cAAY,WAAW,WAAW,QAAQ,cAAc,IAAI,YAAY,IAAI,UAAU,IAAI,SAAS,IACrG,UACH;AAEJ;AAEA,IAAI,cAAc;"}

package/dist/components/navigation/nav-dropdown/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './nav-dropdown';
+export { default as NavDropdownItem } from './nav-dropdown-item';
+export type { NavDropdownProps } from './nav-dropdown';
+export type { NavDropdownItemProps } from './nav-dropdown-item';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/nav-dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/nav-dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACjE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/navigation/nav-dropdown/nav-dropdown-item.d.ts

@@ -0,0 +1,17 @@
+export type NavDropdownItemProps = {
+    /** The route path */
+    to: string;
+    /** The label text or content */
+    children: React.ReactNode;
+    /** Additional CSS classes for the menu item */
+    className?: string;
+};
+/**
+ * Navigation dropdown menu item with consistent styling
+ */
+declare function NavDropdownItem({ to, children, className }: Readonly<NavDropdownItemProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace NavDropdownItem {
+    var displayName: string;
+}
+export default NavDropdownItem;
+//# sourceMappingURL=nav-dropdown-item.d.ts.map

package/dist/components/navigation/nav-dropdown/nav-dropdown-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-dropdown-item.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/nav-dropdown/nav-dropdown-item.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,oBAAoB,GAAG;IACjC,qBAAqB;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,iBAAS,eAAe,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,QAAQ,CAAC,oBAAoB,CAAC,2CAaxF;kBAbQ,eAAe;;;AAiBxB,eAAe,eAAe,CAAC"}

package/dist/components/navigation/nav-dropdown/nav-dropdown-item.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { NavLink } from "react-router-dom";
+function NavDropdownItem({ to, children, className = "" }) {
+  return /* @__PURE__ */ jsx(
+    NavLink,
+    {
+      to,
+      className: ({ isActive }) => `block px-4 py-2 hover:bg-muted/50 no-underline transition-colors ${isActive ? "text-primary font-semibold bg-muted/30" : "text-foreground"} ${className}`,
+      children
+    }
+  );
+}
+NavDropdownItem.displayName = "NavDropdownItem";
+export {
+  NavDropdownItem as default
+};
+//# sourceMappingURL=nav-dropdown-item.js.map

package/dist/components/navigation/nav-dropdown/nav-dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-dropdown-item.js","sources":["../../../../src/components/navigation/nav-dropdown/nav-dropdown-item.tsx"],"sourcesContent":["import { NavLink } from 'react-router-dom';\n\nexport type NavDropdownItemProps = {\n  /** The route path */\n  to: string;\n  /** The label text or content */\n  children: React.ReactNode;\n  /** Additional CSS classes for the menu item */\n  className?: string;\n};\n\n/**\n * Navigation dropdown menu item with consistent styling\n */\nfunction NavDropdownItem({ to, children, className = '' }: Readonly<NavDropdownItemProps>) {\n  return (\n    <NavLink\n      to={to}\n      className={({ isActive }) =>\n        `block px-4 py-2 hover:bg-muted/50 no-underline transition-colors ${\n          isActive ? 'text-primary font-semibold bg-muted/30' : 'text-foreground'\n        } ${className}`\n      }\n    >\n      {children}\n    </NavLink>\n  );\n}\n\nNavDropdownItem.displayName = 'NavDropdownItem';\n\nexport default NavDropdownItem;\n"],"names":[],"mappings":";;AAcA,SAAS,gBAAgB,EAAE,IAAI,UAAU,YAAY,MAAsC;AACzF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,CAAC,EAAE,SAAA,MACZ,oEACE,WAAW,2CAA2C,iBACxD,IAAI,SAAS;AAAA,MAGd;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,gBAAgB,cAAc;"}

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

@@ -0,0 +1,20 @@
+export type NavDropdownProps = {
+    /** The label text for the dropdown trigger */
+    label: string;
+    /** The path prefix to match for active state (e.g., '/showcase') */
+    activePathPrefix: string;
+    /** The dropdown menu items */
+    children: React.ReactNode;
+    /** Optional additional className for the wrapper */
+    className?: string;
+};
+/**
+ * Navigation dropdown with smart active state detection
+ * Displays a labeled trigger that highlights when any child route is active
+ */
+declare function NavDropdown({ label, activePathPrefix, children, className }: Readonly<NavDropdownProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace NavDropdown {
+    var displayName: string;
+}
+export default NavDropdown;
+//# sourceMappingURL=nav-dropdown.d.ts.map

package/dist/components/navigation/nav-dropdown/nav-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/nav-dropdown/nav-dropdown.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,gBAAgB,EAAE,MAAM,CAAC;IACzB,8BAA8B;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CAgBrG;kBAhBQ,WAAW;;;AAoBpB,eAAe,WAAW,CAAC"}

package/dist/components/navigation/nav-dropdown/nav-dropdown.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { useLocation } from "react-router-dom";
+import Dropdown from "../dropdown/dropdown.js";
+function NavDropdown({ label, activePathPrefix, children, className = "" }) {
+  const location = useLocation();
+  const isActive = location.pathname.startsWith(activePathPrefix);
+  return /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      trigger: {
+        title: label,
+        endIcon: "chevron-down"
+      },
+      buttonStyle: "link",
+      className: `${isActive ? "text-primary font-semibold" : "text-foreground hover:text-primary"} ${className}`,
+      children: /* @__PURE__ */ jsx("div", { className: "py-2 flex flex-col", children })
+    }
+  );
+}
+NavDropdown.displayName = "NavDropdown";
+export {
+  NavDropdown as default
+};
+//# sourceMappingURL=nav-dropdown.js.map

package/dist/components/navigation/nav-dropdown/nav-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-dropdown.js","sources":["../../../../src/components/navigation/nav-dropdown/nav-dropdown.tsx"],"sourcesContent":["import { useLocation } from 'react-router-dom';\nimport Dropdown from '../dropdown/dropdown';\n\nexport type NavDropdownProps = {\n  /** The label text for the dropdown trigger */\n  label: string;\n  /** The path prefix to match for active state (e.g., '/showcase') */\n  activePathPrefix: string;\n  /** The dropdown menu items */\n  children: React.ReactNode;\n  /** Optional additional className for the wrapper */\n  className?: string;\n};\n\n/**\n * Navigation dropdown with smart active state detection\n * Displays a labeled trigger that highlights when any child route is active\n */\nfunction NavDropdown({ label, activePathPrefix, children, className = '' }: Readonly<NavDropdownProps>) {\n  const location = useLocation();\n  const isActive = location.pathname.startsWith(activePathPrefix);\n\n  return (\n    <Dropdown\n      trigger={{\n        title: label,\n        endIcon: 'chevron-down'\n      }}\n      buttonStyle=\"link\"\n      className={`${isActive ? 'text-primary font-semibold' : 'text-foreground hover:text-primary'} ${className}`}\n    >\n      <div className=\"py-2 flex flex-col\">{children}</div>\n    </Dropdown>\n  );\n}\n\nNavDropdown.displayName = 'NavDropdown';\n\nexport default NavDropdown;\n"],"names":[],"mappings":";;;AAkBA,SAAS,YAAY,EAAE,OAAO,kBAAkB,UAAU,YAAY,MAAkC;AACtG,QAAM,WAAW,YAAA;AACjB,QAAM,WAAW,SAAS,SAAS,WAAW,gBAAgB;AAE9D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,OAAO;AAAA,QACP,SAAS;AAAA,MAAA;AAAA,MAEX,aAAY;AAAA,MACZ,WAAW,GAAG,WAAW,+BAA+B,oCAAoC,IAAI,SAAS;AAAA,MAEzG,UAAA,oBAAC,OAAA,EAAI,WAAU,sBAAsB,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGpD;AAEA,YAAY,cAAc;"}

package/dist/components/navigation/navbar/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Navbar } from './navbar';
+export { default as NavbarBrand } from './navbar-brand';
+export { default as NavbarLink } from './navbar-link';
+export { default as NavbarToggle } from './navbar-toggle';
+export type { NavbarProps } from './navbar';
+export type { NavbarToggleProps } from './navbar-toggle';
+export type { NavbarBrandProps } from './navbar-brand';
+export type { NavbarLinkProps } from './navbar-link';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/navbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/navigation/navbar/navbar-brand.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export type NavbarBrandProps = {
+    /** Brand content (typically logo image or text) */
+    children: ReactNode;
+    /** Optional navigation link URL */
+    href?: string;
+    /** Whether the link points to an external site */
+    external?: boolean;
+    /** Click handler for interactive brand (when not using href) */
+    onClick?: () => void;
+    /** Additional CSS classes for the brand text */
+    className?: string;
+};
+/**
+ * NavbarBrand Component - Brand/logo section for Navbar
+ * Uses React Router Link for internal navigation
+ */
+declare function NavbarBrand({ children, href, external, onClick, className }: Readonly<NavbarBrandProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace NavbarBrand {
+    var displayName: string;
+}
+export default NavbarBrand;
+//# sourceMappingURL=navbar-brand.d.ts.map

package/dist/components/navigation/navbar/navbar-brand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-brand.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navbar/navbar-brand.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,mDAAmD;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAgB,EAAE,OAAO,EAAE,SAAc,EAAE,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CAgC7G;kBAhCQ,WAAW;;;AAoCpB,eAAe,WAAW,CAAC"}

package/dist/components/navigation/navbar/navbar-brand.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+function NavbarBrand({ children, href, external = false, onClick, className = "" }) {
+  const content = /* @__PURE__ */ jsx("span", { className: `text-lg md:text-xl font-bold ${className}`, children });
+  const linkClassName = "no-underline text-foreground hover:text-primary transition-colors";
+  if (href) {
+    if (external) {
+      return /* @__PURE__ */ jsx("a", { href, className: linkClassName, target: "_blank", rel: "noopener noreferrer", children: content });
+    }
+    return /* @__PURE__ */ jsx(Link, { to: href, className: linkClassName, children: content });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { onClick, className: linkClassName, children: content });
+  }
+  return content;
+}
+NavbarBrand.displayName = "NavbarBrand";
+export {
+  NavbarBrand as default
+};
+//# sourceMappingURL=navbar-brand.js.map

package/dist/components/navigation/navbar/navbar-brand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-brand.js","sources":["../../../../src/components/navigation/navbar/navbar-brand.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { Link } from 'react-router-dom';\n\nexport type NavbarBrandProps = {\n  /** Brand content (typically logo image or text) */\n  children: ReactNode;\n  /** Optional navigation link URL */\n  href?: string;\n  /** Whether the link points to an external site */\n  external?: boolean;\n  /** Click handler for interactive brand (when not using href) */\n  onClick?: () => void;\n  /** Additional CSS classes for the brand text */\n  className?: string;\n};\n\n/**\n * NavbarBrand Component - Brand/logo section for Navbar\n * Uses React Router Link for internal navigation\n */\nfunction NavbarBrand({ children, href, external = false, onClick, className = '' }: Readonly<NavbarBrandProps>) {\n  const content = <span className={`text-lg md:text-xl font-bold ${className}`}>{children}</span>;\n\n  const linkClassName = 'no-underline text-foreground hover:text-primary transition-colors';\n\n  if (href) {\n    // External links use regular anchor tag\n    if (external) {\n      return (\n        <a href={href} className={linkClassName} target=\"_blank\" rel=\"noopener noreferrer\">\n          {content}\n        </a>\n      );\n    }\n\n    // Internal links use React Router Link\n    return (\n      <Link to={href} className={linkClassName}>\n        {content}\n      </Link>\n    );\n  }\n\n  if (onClick) {\n    return (\n      <button onClick={onClick} className={linkClassName}>\n        {content}\n      </button>\n    );\n  }\n\n  return content;\n}\n\nNavbarBrand.displayName = 'NavbarBrand';\n\nexport default NavbarBrand;\n"],"names":[],"mappings":";;AAoBA,SAAS,YAAY,EAAE,UAAU,MAAM,WAAW,OAAO,SAAS,YAAY,MAAkC;AAC9G,QAAM,UAAU,oBAAC,QAAA,EAAK,WAAW,gCAAgC,SAAS,IAAK,UAAS;AAExF,QAAM,gBAAgB;AAEtB,MAAI,MAAM;AAER,QAAI,UAAU;AACZ,aACE,oBAAC,OAAE,MAAY,WAAW,eAAe,QAAO,UAAS,KAAI,uBAC1D,UAAA,QAAA,CACH;AAAA,IAEJ;AAGA,+BACG,MAAA,EAAK,IAAI,MAAM,WAAW,eACxB,UAAA,SACH;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE,oBAAC,UAAA,EAAO,SAAkB,WAAW,eAClC,UAAA,SACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,YAAY,cAAc;"}

package/dist/components/navigation/navbar/navbar-link.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export type NavbarLinkProps = {
+    /** Navigation destination URL */
+    href: string;
+    /** Link text or content */
+    children: ReactNode;
+    /** Whether the link points to an external site */
+    external?: boolean;
+    /** Additional CSS classes for the link */
+    className?: string;
+    /** Match only exact path for active state (React Router NavLink prop) */
+    end?: boolean;
+};
+/**
+ * NavbarLink Component - Navigation link for Navbar
+ * Uses React Router's NavLink for automatic active state management
+ */
+declare function NavbarLink({ href, children, external, className, end }: Readonly<NavbarLinkProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace NavbarLink {
+    var displayName: string;
+}
+export default NavbarLink;
+//# sourceMappingURL=navbar-link.d.ts.map

package/dist/components/navigation/navbar/navbar-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-link.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navbar/navbar-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,MAAM,MAAM,eAAe,GAAG;IAC5B,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAgB,EAAE,SAAc,EAAE,GAAW,EAAE,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAwC/G;kBAxCQ,UAAU;;;AA4CnB,eAAe,UAAU,CAAC"}

package/dist/components/navigation/navbar/navbar-link.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { NavLink } from "react-router-dom";
+function NavbarLink({ href, children, external = false, className = "", end = false }) {
+  const baseClassName = `block md:inline-block py-2 md:py-0 font-medium transition-colors no-underline ${className}`;
+  if (external) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: `${baseClassName} text-foreground hover:text-primary`,
+        children
+      }
+    );
+  }
+  if (href.startsWith("#")) {
+    return /* @__PURE__ */ jsx("a", { href, className: `${baseClassName} text-foreground hover:text-primary`, children });
+  }
+  return /* @__PURE__ */ jsx(
+    NavLink,
+    {
+      to: href,
+      end,
+      className: ({ isActive }) => `${baseClassName} ${isActive ? "text-primary font-semibold border-b-2 border-primary" : "text-foreground hover:text-primary"}`,
+      children
+    }
+  );
+}
+NavbarLink.displayName = "NavbarLink";
+export {
+  NavbarLink as default
+};
+//# sourceMappingURL=navbar-link.js.map

package/dist/components/navigation/navbar/navbar-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-link.js","sources":["../../../../src/components/navigation/navbar/navbar-link.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { NavLink } from 'react-router-dom';\n\nexport type NavbarLinkProps = {\n  /** Navigation destination URL */\n  href: string;\n  /** Link text or content */\n  children: ReactNode;\n  /** Whether the link points to an external site */\n  external?: boolean;\n  /** Additional CSS classes for the link */\n  className?: string;\n  /** Match only exact path for active state (React Router NavLink prop) */\n  end?: boolean;\n};\n\n/**\n * NavbarLink Component - Navigation link for Navbar\n * Uses React Router's NavLink for automatic active state management\n */\nfunction NavbarLink({ href, children, external = false, className = '', end = false }: Readonly<NavbarLinkProps>) {\n  const baseClassName = `block md:inline-block py-2 md:py-0 font-medium transition-colors no-underline ${className}`;\n\n  // External links use regular anchor tag\n  if (external) {\n    return (\n      <a\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className={`${baseClassName} text-foreground hover:text-primary`}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // Hash anchors should be plain anchors (in-page navigation), not NavLink\n  if (href.startsWith('#')) {\n    return (\n      <a href={href} className={`${baseClassName} text-foreground hover:text-primary`}>\n        {children}\n      </a>\n    );\n  }\n\n  // Internal links use React Router NavLink with automatic active state\n  return (\n    <NavLink\n      to={href}\n      end={end}\n      className={({ isActive }) =>\n        `${baseClassName} ${\n          isActive ? 'text-primary font-semibold border-b-2 border-primary' : 'text-foreground hover:text-primary'\n        }`\n      }\n    >\n      {children}\n    </NavLink>\n  );\n}\n\nNavbarLink.displayName = 'NavbarLink';\n\nexport default NavbarLink;\n"],"names":[],"mappings":";;AAoBA,SAAS,WAAW,EAAE,MAAM,UAAU,WAAW,OAAO,YAAY,IAAI,MAAM,SAAoC;AAChH,QAAM,gBAAgB,iFAAiF,SAAS;AAGhH,MAAI,UAAU;AACZ,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,WAAW,GAAG,aAAa;AAAA,QAE1B;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAGA,MAAI,KAAK,WAAW,GAAG,GAAG;AACxB,+BACG,KAAA,EAAE,MAAY,WAAW,GAAG,aAAa,uCACvC,UACH;AAAA,EAEJ;AAGA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA,WAAW,CAAC,EAAE,SAAA,MACZ,GAAG,aAAa,IACd,WAAW,yDAAyD,oCACtE;AAAA,MAGD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,WAAW,cAAc;"}

package/dist/components/navigation/navbar/navbar-toggle.d.ts

@@ -0,0 +1,34 @@
+export interface NavbarToggleProps {
+    /**
+     * Whether the mobile menu is open (for mobile view)
+     */
+    mobileMenuOpen?: boolean;
+    /**
+     * Whether the sidebar is collapsed (for desktop sidebar view)
+     */
+    sidebarCollapsed?: boolean;
+    /**
+     * Click handler for mobile menu toggle (mobile view)
+     */
+    onMobileMenuToggle?: () => void;
+    /**
+     * Click handler for sidebar toggle (desktop view)
+     */
+    onSidebarToggle?: () => void;
+    /**
+     * Optional custom className
+     */
+    className?: string;
+}
+/**
+ * NavbarToggle - A responsive toggle button that switches between mobile menu and sidebar collapse icons
+ *
+ * On mobile (< lg): Shows hamburger menu / close icon and calls onMobileMenuToggle
+ * On desktop (>= lg): Shows sidebar expand / collapse icon and calls onSidebarToggle
+ */
+declare function NavbarToggle({ mobileMenuOpen, sidebarCollapsed, onMobileMenuToggle, onSidebarToggle, className }: NavbarToggleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace NavbarToggle {
+    var displayName: string;
+}
+export default NavbarToggle;
+//# sourceMappingURL=navbar-toggle.d.ts.map

package/dist/components/navigation/navbar/navbar-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navbar/navbar-toggle.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,iBAAS,YAAY,CAAC,EACpB,cAAsB,EACtB,gBAAwB,EACxB,kBAAkB,EAClB,eAAe,EACf,SAAc,EACf,EAAE,iBAAiB,2CA4BnB;kBAlCQ,YAAY;;;AAsCrB,eAAe,YAAY,CAAC"}

package/dist/components/navigation/navbar/navbar-toggle.js

@@ -0,0 +1,37 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Icon } from "../../system/icon/icon.js";
+function NavbarToggle({
+  mobileMenuOpen = false,
+  sidebarCollapsed = false,
+  onMobileMenuToggle,
+  onSidebarToggle,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onMobileMenuToggle,
+        className: `lg:hidden flex items-center justify-center w-9 h-9 md:w-8 md:h-8 rounded text-foreground/70 hover:text-foreground hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-ring ${className}`.trim(),
+        "aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
+        type: "button",
+        children: mobileMenuOpen ? /* @__PURE__ */ jsx(Icon, { name: "x", size: "sm" }) : /* @__PURE__ */ jsx(Icon, { name: "menu-2", size: "sm" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onSidebarToggle,
+        className: `hidden lg:flex items-center justify-center w-8 h-8 rounded text-foreground/70 hover:text-foreground hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-ring ${className}`.trim(),
+        "aria-label": sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar",
+        type: "button",
+        children: sidebarCollapsed ? /* @__PURE__ */ jsx(Icon, { name: "layout-sidebar-right-expand", size: "sm" }) : /* @__PURE__ */ jsx(Icon, { name: "layout-sidebar-right-collapse", size: "sm" })
+      }
+    )
+  ] });
+}
+NavbarToggle.displayName = "NavbarToggle";
+export {
+  NavbarToggle as default
+};
+//# sourceMappingURL=navbar-toggle.js.map

package/dist/components/navigation/navbar/navbar-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-toggle.js","sources":["../../../../src/components/navigation/navbar/navbar-toggle.tsx"],"sourcesContent":["import Icon from '../../system/icon/icon';\n\nexport interface NavbarToggleProps {\n  /**\n   * Whether the mobile menu is open (for mobile view)\n   */\n  mobileMenuOpen?: boolean;\n  /**\n   * Whether the sidebar is collapsed (for desktop sidebar view)\n   */\n  sidebarCollapsed?: boolean;\n  /**\n   * Click handler for mobile menu toggle (mobile view)\n   */\n  onMobileMenuToggle?: () => void;\n  /**\n   * Click handler for sidebar toggle (desktop view)\n   */\n  onSidebarToggle?: () => void;\n  /**\n   * Optional custom className\n   */\n  className?: string;\n}\n\n/**\n * NavbarToggle - A responsive toggle button that switches between mobile menu and sidebar collapse icons\n *\n * On mobile (< lg): Shows hamburger menu / close icon and calls onMobileMenuToggle\n * On desktop (>= lg): Shows sidebar expand / collapse icon and calls onSidebarToggle\n */\nfunction NavbarToggle({\n  mobileMenuOpen = false,\n  sidebarCollapsed = false,\n  onMobileMenuToggle,\n  onSidebarToggle,\n  className = ''\n}: NavbarToggleProps) {\n  return (\n    <>\n      {/* Mobile toggle - visible on lg breakpoint and below */}\n      <button\n        onClick={onMobileMenuToggle}\n        className={`lg:hidden flex items-center justify-center w-9 h-9 md:w-8 md:h-8 rounded text-foreground/70 hover:text-foreground hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-ring ${className}`.trim()}\n        aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}\n        type=\"button\"\n      >\n        {mobileMenuOpen ? <Icon name=\"x\" size=\"sm\" /> : <Icon name=\"menu-2\" size=\"sm\" />}\n      </button>\n\n      {/* Desktop toggle - visible on lg breakpoint and above */}\n      <button\n        onClick={onSidebarToggle}\n        className={`hidden lg:flex items-center justify-center w-8 h-8 rounded text-foreground/70 hover:text-foreground hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-ring ${className}`.trim()}\n        aria-label={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n        type=\"button\"\n      >\n        {sidebarCollapsed ? (\n          <Icon name=\"layout-sidebar-right-expand\" size=\"sm\" />\n        ) : (\n          <Icon name=\"layout-sidebar-right-collapse\" size=\"sm\" />\n        )}\n      </button>\n    </>\n  );\n}\n\nNavbarToggle.displayName = 'NavbarToggle';\n\nexport default NavbarToggle;\n"],"names":[],"mappings":";;AA+BA,SAAS,aAAa;AAAA,EACpB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAAsB;AACpB,SACE,qBAAA,UAAA,EAEE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW,sMAAsM,SAAS,GAAG,KAAA;AAAA,QAC7N,cAAY,iBAAiB,eAAe;AAAA,QAC5C,MAAK;AAAA,QAEJ,UAAA,iBAAiB,oBAAC,MAAA,EAAK,MAAK,KAAI,MAAK,KAAA,CAAK,IAAK,oBAAC,MAAA,EAAK,MAAK,UAAS,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAIhF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW,wLAAwL,SAAS,GAAG,KAAA;AAAA,QAC/M,cAAY,mBAAmB,mBAAmB;AAAA,QAClD,MAAK;AAAA,QAEJ,UAAA,mBACC,oBAAC,MAAA,EAAK,MAAK,+BAA8B,MAAK,KAAA,CAAK,IAEnD,oBAAC,MAAA,EAAK,MAAK,iCAAgC,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAEzD,GACF;AAEJ;AAEA,aAAa,cAAc;"}

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export type NavbarProps = {
+    /** Brand logo or text to display on the left side */
+    brand?: ReactNode;
+    /** Navigation links or items to display in the center */
+    children: ReactNode;
+    /** Enable sticky positioning at the top of viewport */
+    sticky?: boolean;
+    /** Additional CSS classes for the navbar container */
+    className?: string;
+    /** Action buttons or elements to display on the right side */
+    actions?: ReactNode;
+    /** Visual style variant for the navbar background */
+    appearance?: 'solid' | 'blur' | 'transparent';
+    /** Border configuration for top and/or bottom edges */
+    border?: 'none' | 'bottom' | 'top' | 'both';
+};
+/**
+ * Navbar Component - Responsive navigation
+ * - Sticky positioning option
+ * - Brand logo section
+ * - Action buttons area
+ * - Fully responsive
+ * - Configurable container size
+ * - Appearance modes: solid, blur (frosted glass), transparent
+ * - Configurable borders: none, bottom, top, or both
+ */
+declare function Navbar({ brand, children, sticky, className, actions, appearance, border }: Readonly<NavbarProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Navbar {
+    var displayName: string;
+}
+export default Navbar;
+//# sourceMappingURL=navbar.d.ts.map

package/dist/components/navigation/navbar/navbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navbar/navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,MAAM,MAAM,WAAW,GAAG;IACxB,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yDAAyD;IACzD,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,CAAC;IAC9C,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;CAC7C,CAAC;AAEF;;;;;;;;;GASG;AACH,iBAAS,MAAM,CAAC,EACd,KAAK,EACL,QAAQ,EACR,MAAa,EACb,SAAc,EACd,OAAO,EACP,UAAoB,EACpB,MAAe,EAChB,EAAE,QAAQ,CAAC,WAAW,CAAC,2CAkCvB;kBA1CQ,MAAM;;;AA8Cf,eAAe,MAAM,CAAC"}

package/dist/components/navigation/navbar/navbar.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Container from "../../layout/container/container.js";
+function Navbar({
+  brand,
+  children,
+  sticky = true,
+  className = "",
+  actions,
+  appearance = "solid",
+  border = "none"
+}) {
+  const appearanceClasses = {
+    solid: "bg-background shadow-sm",
+    blur: "bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/60 border border-border/60",
+    transparent: "bg-transparent"
+  };
+  const borderClasses = {
+    none: "",
+    bottom: "border-b border-border",
+    top: "border-t border-border",
+    both: "border-y border-border"
+  };
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-appearance": appearance,
+      className: `${sticky ? "sticky top-0 z-50" : ""} ${appearanceClasses[appearance]} ${borderClasses[border]} ${className}`,
+      children: /* @__PURE__ */ jsx(Container, { marginX: "sm", size: "full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between h-14 md:h-16 px-3 md:px-0", children: [
+        brand && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: brand }),
+        /* @__PURE__ */ jsx("div", { className: "hidden md:flex md:items-center md:space-x-6 md:flex-1 md:ml-10", children }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: actions })
+      ] }) })
+    }
+  );
+}
+Navbar.displayName = "Navbar";
+export {
+  Navbar as default
+};
+//# sourceMappingURL=navbar.js.map

package/dist/components/navigation/navbar/navbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.js","sources":["../../../../src/components/navigation/navbar/navbar.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport Container from '../../layout/container/container';\n\nexport type NavbarProps = {\n  /** Brand logo or text to display on the left side */\n  brand?: ReactNode;\n  /** Navigation links or items to display in the center */\n  children: ReactNode;\n  /** Enable sticky positioning at the top of viewport */\n  sticky?: boolean;\n  /** Additional CSS classes for the navbar container */\n  className?: string;\n  /** Action buttons or elements to display on the right side */\n  actions?: ReactNode;\n  /** Visual style variant for the navbar background */\n  appearance?: 'solid' | 'blur' | 'transparent';\n  /** Border configuration for top and/or bottom edges */\n  border?: 'none' | 'bottom' | 'top' | 'both';\n};\n\n/**\n * Navbar Component - Responsive navigation\n * - Sticky positioning option\n * - Brand logo section\n * - Action buttons area\n * - Fully responsive\n * - Configurable container size\n * - Appearance modes: solid, blur (frosted glass), transparent\n * - Configurable borders: none, bottom, top, or both\n */\nfunction Navbar({\n  brand,\n  children,\n  sticky = true,\n  className = '',\n  actions,\n  appearance = 'solid',\n  border = 'none'\n}: Readonly<NavbarProps>) {\n  // Appearance styles\n  const appearanceClasses = {\n    solid: 'bg-background shadow-sm',\n    blur: 'bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/60 border border-border/60',\n    transparent: 'bg-transparent'\n  } as const;\n\n  const borderClasses = {\n    none: '',\n    bottom: 'border-b border-border',\n    top: 'border-t border-border',\n    both: 'border-y border-border'\n  };\n\n  return (\n    <nav\n      data-appearance={appearance}\n      className={`${sticky ? 'sticky top-0 z-50' : ''} ${appearanceClasses[appearance]} ${borderClasses[border]} ${className}`}\n    >\n      <Container marginX=\"sm\" size=\"full\">\n        <div className=\"flex items-center justify-between h-14 md:h-16 px-3 md:px-0\">\n          {/* Brand */}\n          {brand && <div className=\"shrink-0\">{brand}</div>}\n\n          {/* Navigation */}\n          <div className=\"hidden md:flex md:items-center md:space-x-6 md:flex-1 md:ml-10\">{children}</div>\n\n          {/* Actions */}\n          {actions && <div className=\"flex items-center gap-1\">{actions}</div>}\n        </div>\n      </Container>\n    </nav>\n  );\n}\n\nNavbar.displayName = 'Navbar';\n\nexport default Navbar;\n"],"names":[],"mappings":";;AA+BA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA,aAAa;AAAA,EACb,SAAS;AACX,GAA0B;AAExB,QAAM,oBAAoB;AAAA,IACxB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,aAAa;AAAA,EAAA;AAGf,QAAM,gBAAgB;AAAA,IACpB,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,MAAM;AAAA,EAAA;AAGR,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAiB;AAAA,MACjB,WAAW,GAAG,SAAS,sBAAsB,EAAE,IAAI,kBAAkB,UAAU,CAAC,IAAI,cAAc,MAAM,CAAC,IAAI,SAAS;AAAA,MAEtH,UAAA,oBAAC,aAAU,SAAQ,MAAK,MAAK,QAC3B,UAAA,qBAAC,OAAA,EAAI,WAAU,+DAEZ,UAAA;AAAA,QAAA,SAAS,oBAAC,OAAA,EAAI,WAAU,YAAY,UAAA,OAAM;AAAA,QAG3C,oBAAC,OAAA,EAAI,WAAU,kEAAkE,SAAA,CAAS;AAAA,QAGzF,WAAW,oBAAC,OAAA,EAAI,WAAU,2BAA2B,UAAA,QAAA,CAAQ;AAAA,MAAA,EAAA,CAChE,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,OAAO,cAAc;"}

package/dist/components/navigation/notification-dropdown/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './notification-dropdown';
+export * from './notification-dropdown';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/notification-dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/notification-dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,cAAc,yBAAyB,CAAC"}