{"version":3,"sources":["../src/TopNavItem/TopNavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDown } from 'lucide-react';\n\nexport interface TopNavItemProps {\n  /**\n   * Text label for the nav item\n   */\n  children: React.ReactNode;\n  /**\n   * Whether this nav item is currently active/selected\n   */\n  active?: boolean;\n  /**\n   * Click handler\n   */\n  onClick?: () => void;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Custom style\n   */\n  style?: React.CSSProperties;\n}\n\n/**\n * TopNavItem component - Arbor Design System\n *\n * A navigation item for the top navigation bar with text and chevron icon.\n * Supports default, hover, focused, and active states.\n */\nexport const TopNavItem = React.forwardRef<HTMLButtonElement, TopNavItemProps>(\n  (\n    {\n      children,\n      active = false,\n      onClick,\n      className,\n      style,\n    },\n    ref\n  ) => {\n    const [isHovered, setIsHovered] = React.useState(false);\n    const [isFocused, setIsFocused] = React.useState(false);\n\n    // Determine colors based on state\n    const textColor = active ? '#005700' : '#474747';\n    const iconColor = active ? '#005700' : '#474747';\n\n    // Determine background based on state\n    const getBackgroundColor = () => {\n      if (active) return '#f0faf3';\n      if (isHovered) return '#f8f8f8';\n      return 'transparent';\n    };\n\n    const containerStyles: React.CSSProperties = {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: '4px',\n      padding: '4px 8px',\n      backgroundColor: getBackgroundColor(),\n      borderRadius: '8px',\n      border: 'none',\n      cursor: 'pointer',\n      fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n      boxSizing: 'border-box',\n      transition: 'background-color 0.15s ease-in-out',\n      outline: 'none',\n      boxShadow: isFocused ? '0px 0px 0px 3px #3cad51' : 'none',\n      ...style,\n    };\n\n    const textStyles: React.CSSProperties = {\n      fontSize: '13px',\n      fontWeight: 600,\n      color: textColor,\n      lineHeight: 1.5,\n      textAlign: 'center',\n      whiteSpace: 'nowrap',\n    };\n\n    return (\n      <button\n        ref={ref}\n        className={className}\n        style={containerStyles}\n        onClick={onClick}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        type=\"button\"\n      >\n        <span style={textStyles}>{children}</span>\n        <ChevronDown size={12} color={iconColor} strokeWidth={2} />\n      </button>\n    );\n  }\n);\n\nTopNavItem.displayName = 'TopNavItem';\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,mBAAmB;AAoFtB,SAWE,KAXF;AArDC,IAAM,aAAmB;AAAA,EAC9B,CACE;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,CAAC,WAAW,YAAY,IAAU,eAAS,KAAK;AACtD,UAAM,CAAC,WAAW,YAAY,IAAU,eAAS,KAAK;AAGtD,UAAM,YAAY,SAAS,YAAY;AACvC,UAAM,YAAY,SAAS,YAAY;AAGvC,UAAM,qBAAqB,MAAM;AAC/B,UAAI,OAAQ,QAAO;AACnB,UAAI,UAAW,QAAO;AACtB,aAAO;AAAA,IACT;AAEA,UAAM,kBAAuC;AAAA,MAC3C,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,KAAK;AAAA,MACL,SAAS;AAAA,MACT,iBAAiB,mBAAmB;AAAA,MACpC,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW,YAAY,4BAA4B;AAAA,MACnD,GAAG;AAAA,IACL;AAEA,UAAM,aAAkC;AAAA,MACtC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,YAAY;AAAA,IACd;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA,cAAc,MAAM,aAAa,IAAI;AAAA,QACrC,cAAc,MAAM,aAAa,KAAK;AAAA,QACtC,SAAS,MAAM,aAAa,IAAI;AAAA,QAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,QAChC,MAAK;AAAA,QAEL;AAAA,8BAAC,UAAK,OAAO,YAAa,UAAS;AAAA,UACnC,oBAAC,eAAY,MAAM,IAAI,OAAO,WAAW,aAAa,GAAG;AAAA;AAAA;AAAA,IAC3D;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;","names":[]}